Gallery Focused 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_studio_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="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center mb-12">
      <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-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight mb-6"><span data-animate="heading">A Gallery Of My Best Work</span></h1>
        <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
          We blend creativity with strategy to build brands that resonate, engage, and leave lasting impressions.
        </p>
        <div class="flex flex-col sm:flex-row gap-3 mb-6">
          <input
            type="email"
            placeholder="Enter your email"
            class="flex-1 px-5 py-3 rounded-full border border-slate-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-hidden focus:border-indigo-500 dark:focus:border-indigo-400 transition-colors"
            data-motion="input"
          >
          <button type="button" data-motion="button" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold">
            Get Started
          </button>
        </div>
        <p class="text-slate-500 dark:text-neutral-400 text-sm" data-motion="social-proof">
          Join 10,000+ creative professionals worldwide
        </p>
      </div>
      <div data-motion="image" class="relative">
        <div class="rounded-3xl overflow-hidden">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1743119638006-a01d4625745d?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljJTIwZ2FsbGVyeXxlbnwxfDB8fHwxNzY5MzE4NjAyfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
            alt="Creative team working together"
            class="w-full h-[400px] lg:h-[500px] object-cover"
          >
        </div>
        <div data-motion="card" class="absolute -bottom-4 -left-4 p-4 bg-white dark:bg-neutral-900 rounded-2xl border border-slate-200 dark:border-neutral-800">
          <div class="flex items-center gap-3">
            <div data-motion="icon" class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center">
              <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
              </svg>
            </div>
            <div>
              <span class="text-slate-900 dark:text-white font-semibold block text-sm">Award Winning</span>
              <span class="text-indigo-600 dark:text-indigo-400 text-xs">Design Studio</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid md:grid-cols-3 gap-5">
      <div data-motion="card" class="relative rounded-2xl overflow-hidden h-56 group">
        <img data-motion="image"
          src="https://images.unsplash.com/photo-1596649300028-340ad0ec6146?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljJTIwZ2FsbGVyeXxlbnwxfDB8fHwxNzY5MzE4NjAyfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
          alt="Brand identity design"
          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 to-transparent"></div>
        <div class="absolute bottom-4 left-4">
          <span class="text-white font-semibold">Brand Identity</span>
        </div>
      </div>
      <div data-motion="card" class="relative rounded-2xl overflow-hidden h-56 group">
        <img data-motion="image"
          src="https://images.unsplash.com/photo-1572947650440-e8a97ef053b2?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljJTIwZ2FsbGVyeXxlbnwxfDB8fHwxNzY5MzE4NjAyfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
          alt="Digital design showcase"
          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 to-transparent"></div>
        <div class="absolute bottom-4 left-4">
          <span class="text-white font-semibold">Digital Design</span>
        </div>
      </div>
      <div data-motion="card" class="relative rounded-2xl overflow-hidden h-56 group">
        <img data-motion="image"
          src="https://images.unsplash.com/photo-1492037766660-2a56f9eb3fcb?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw0fHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljJTIwZ2FsbGVyeXxlbnwxfDB8fHwxNzY5MzE4NjAyfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
          alt="UI/UX design"
          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 to-transparent"></div>
        <div class="absolute bottom-4 left-4">
          <span class="text-white font-semibold">UI/UX Design</span>
        </div>
      </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.