Minimal 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_design_showcase_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950 overflow-hidden">
  <style>
    @keyframes marquee-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-33.33%); }
    }
    #_hero_design_showcase_v6_001 .marquee {
      display: flex;
      width: max-content;
      animation: marquee-left 20s linear infinite;
    }
    #_hero_design_showcase_v6_001 .marquee-content {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      padding-right: 1.5rem;
    }
  </style>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col gap-16">
      <div class="grid lg:grid-cols-2 gap-12 items-end">
        <div data-motion="hero">
          <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase mb-4 block">Creative Studio</span>
          <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white leading-none">
            <span data-animate="heading">Design</span><br>
            <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400">That Moves</span>
          </h1>
        </div>
        <div class="rounded-3xl overflow-hidden" data-motion="image">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=800&auto=format&fit=crop&q=80"
            alt="Creative team at work"
            class="w-full h-72 object-cover"
          >
        </div>
      </div>
      <div class="grid lg:grid-cols-3 gap-12">
        <div data-motion="card">
          <p class="text-xl text-slate-600 dark:text-neutral-400 leading-relaxed" data-animate="text">
            We craft digital experiences that resonate with audiences and drive meaningful engagement for forward-thinking brands.
          </p>
        </div>
        <div data-motion="card">
          <p class="text-slate-500 dark:text-neutral-400 leading-relaxed" data-animate="text">
            Our approach combines strategic thinking with creative execution, ensuring every project delivers measurable results and lasting impact.
          </p>
        </div>
        <div class="flex flex-col gap-4" data-motion="card">
          <a data-motion="button" href="#" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold text-center">
            View Our Work
          </a>
          <a data-motion="button" href="#" class="inline-flex items-center justify-center gap-2 text-indigo-600 dark:text-indigo-400 font-semibold hover:gap-3 transition-all duration-300">
            Start a Project
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full h-px bg-slate-200 dark:bg-neutral-800"></div>
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-8" data-motion="stats">
        <div>
          <span class="text-4xl font-bold text-indigo-600 dark:text-indigo-400 block">150+</span>
          <span class="text-slate-500 dark:text-neutral-400 text-sm">Projects Delivered</span>
        </div>
        <div>
          <span class="text-4xl font-bold text-slate-900 dark:text-white block">12</span>
          <span class="text-slate-500 dark:text-neutral-400 text-sm">Design Awards</span>
        </div>
        <div>
          <span class="text-4xl font-bold text-slate-900 dark:text-white block">8</span>
          <span class="text-slate-500 dark:text-neutral-400 text-sm">Years Experience</span>
        </div>
        <div>
          <span class="text-4xl font-bold text-slate-900 dark:text-white block">98%</span>
          <span class="text-slate-500 dark:text-neutral-400 text-sm">Client Satisfaction</span>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-16 bg-indigo-600 py-4" data-motion="marquee">
    <div class="marquee">
      <div class="marquee-content">
        <span data-motion="badge" class="text-white text-sm font-semibold whitespace-nowrap">Brand Identity</span>
        <span class="w-1.5 h-1.5 bg-white/50 rounded-full"></span>
        <span data-motion="badge" class="text-white text-sm font-semibold whitespace-nowrap">Web Design</span>
        <span class="w-1.5 h-1.5 bg-white/50 rounded-full"></span>
        <span data-motion="badge" class="text-white text-sm font-semibold whitespace-nowrap">Product Design</span>
        <span class="w-1.5 h-1.5 bg-white/50 rounded-full"></span>
        <span data-motion="badge" class="text-white text-sm font-semibold whitespace-nowrap">Motion Graphics</span>
        <span class="w-1.5 h-1.5 bg-white/50 rounded-full"></span>
      </div>
      <div class="marquee-content" aria-hidden="true">
        <span data-motion="badge" class="text-white text-sm font-semibold whitespace-nowrap">Brand Identity</span>
        <span class="w-1.5 h-1.5 bg-white/50 rounded-full"></span>
        <span data-motion="badge" class="text-white text-sm font-semibold whitespace-nowrap">Web Design</span>
        <span class="w-1.5 h-1.5 bg-white/50 rounded-full"></span>
        <span data-motion="badge" class="text-white text-sm font-semibold whitespace-nowrap">Product Design</span>
        <span class="w-1.5 h-1.5 bg-white/50 rounded-full"></span>
        <span data-motion="badge" class="text-white text-sm font-semibold whitespace-nowrap">Motion Graphics</span>
        <span class="w-1.5 h-1.5 bg-white/50 rounded-full"></span>
      </div>
      <div class="marquee-content" aria-hidden="true">
        <span data-motion="badge" class="text-white text-sm font-semibold whitespace-nowrap">Brand Identity</span>
        <span class="w-1.5 h-1.5 bg-white/50 rounded-full"></span>
        <span data-motion="badge" class="text-white text-sm font-semibold whitespace-nowrap">Web Design</span>
        <span class="w-1.5 h-1.5 bg-white/50 rounded-full"></span>
        <span data-motion="badge" class="text-white text-sm font-semibold whitespace-nowrap">Product Design</span>
        <span class="w-1.5 h-1.5 bg-white/50 rounded-full"></span>
        <span data-motion="badge" class="text-white text-sm font-semibold whitespace-nowrap">Motion Graphics</span>
        <span class="w-1.5 h-1.5 bg-white/50 rounded-full"></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.