Creative Portfolio Tailwind CSS Template

Hero section code

The first screen of this free template, as it ships. Sign in to copy the full page.

<section id="_hero_creative_journey_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-3xl mx-auto mb-16" data-motion="hero">
      <span data-motion="badge" class="inline-flex items-center gap-2 px-4 py-1.5 bg-indigo-100 dark:bg-indigo-900/40 rounded-full text-indigo-600 dark:text-indigo-400 text-sm font-medium mb-6">
        <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
        Creative Growth
      </span>
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight mb-6"><span data-animate="heading">Showcase Your Creative Vision</span></h1>
      <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
        Embrace challenges, find inspiration in everyday moments, and transform your vision into reality. Discover your unique creative voice.
      </p>
      <div class="flex flex-wrap justify-center gap-4">
        <a href="#" data-motion="button" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold">
          Start Creating
        </a>
        <a href="#" data-motion="button" class="px-6 py-3 bg-indigo-100 dark:bg-indigo-900/30 hover:bg-indigo-200 dark:hover:bg-indigo-900/50 transition-colors rounded-full text-indigo-700 dark:text-indigo-300 font-semibold">
          Learn More
        </a>
      </div>
    </div>
    <div class="grid lg:grid-cols-12 gap-5">
      <div class="lg:col-span-3 flex flex-col gap-5">
        <div data-motion="card" class="rounded-3xl overflow-hidden h-48">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1760071744047-5542cbfda184?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
            alt="Creative team collaboration"
            class="w-full h-full object-cover hover:scale-105 transition-transform duration-700"
          >
        </div>
        <div data-motion="card" class="rounded-3xl overflow-hidden h-64">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1758613654472-7d0f611c1b82?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
            alt="Design workspace"
            class="w-full h-full object-cover hover:scale-105 transition-transform duration-700"
          >
        </div>
      </div>
      <div class="lg:col-span-6" data-motion="card">
        <div class="relative rounded-3xl overflow-hidden h-80 lg:h-full group">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1758613654800-26e7f2706fbf?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
            alt="Creative brainstorming session"
            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
          >
          <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
          <div class="absolute bottom-6 left-6 right-6">
            <span data-motion="badge" class="text-indigo-400 text-xs font-semibold uppercase tracking-wider mb-1 block">Featured</span>
            <h3 class="text-white text-xl font-bold">The Creative Process</h3>
            <p class="text-slate-300 text-sm mt-1">Where ideas come to life</p>
          </div>
        </div>
      </div>
      <div class="lg:col-span-3 flex flex-col gap-5">
        <div data-motion="card" class="rounded-3xl overflow-hidden h-64">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1758613653298-738e98658e31?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw0fHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
            alt="Team meeting"
            class="w-full h-full object-cover hover:scale-105 transition-transform duration-700"
          >
        </div>
        <div data-motion="card" class="rounded-3xl overflow-hidden h-48">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1758613653231-bae4e1131dde?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw1fHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
            alt="Creative workshop"
            class="w-full h-full object-cover hover:scale-105 transition-transform duration-700"
          >
        </div>
      </div>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-12 pt-10 border-t border-slate-200 dark:border-neutral-800">
      <div data-motion="stat" class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">10K+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Creators</span>
      </div>
      <div data-motion="stat" class="text-center">
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">500+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Workshops</span>
      </div>
      <div data-motion="stat" class="text-center">
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">95%</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Satisfaction</span>
      </div>
      <div data-motion="stat" class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">24/7</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Support</span>
      </div>
    </div>
  </div>
</section>

From template to your website

Open the editor to try colors, fonts, and screen sizes, then sign in with an account that includes this template to copy or download its HTML. It needs Tailwind CSS v4 and, for the dark theme, @custom-variant dark (&:where(.dark, .dark *));.

Text, images, and testimonials are placeholders. Replace them, and connect forms or booking to your own services before publishing. Usage is covered by the OpenTailwind license.