Bold 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_creator_profile_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-12 gap-8 lg:gap-12 items-center">
      <div class="lg:col-span-5" data-motion="image">
        <div class="relative">
          <div class="rounded-3xl overflow-hidden">
            <img data-motion="image"
              src="https://images.unsplash.com/photo-1758613654240-e531842faea6?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljJTIwYm9sZHxlbnwxfDB8fHwxNzY5MzE4NTk2fDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
              alt="Creative professional portrait"
              class="w-full h-[450px] lg:h-[550px] object-cover"
            >
          </div>
          <div data-motion="card" class="absolute -bottom-4 -right-4 p-4 bg-indigo-500 rounded-2xl">
            <span class="text-white text-2xl font-bold block">8+</span>
            <span class="text-indigo-100 text-sm">Years Exp</span>
          </div>
        </div>
      </div>
      <div class="lg:col-span-7" 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">UX Designer</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">Creative Work That Inspires</span></h1>
        <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
          Award-winning UX designer crafting intuitive digital experiences that connect brands with their audiences through thoughtful, user-centered design.
        </p>
        <div class="flex flex-wrap gap-4 mb-10">
          <a href="#" data-motion="button" class="px-6 py-3 bg-indigo-500 hover:bg-indigo-600 transition-colors rounded-full text-white font-semibold">
            View Portfolio
          </a>
          <a href="#" data-motion="button" class="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 font-semibold hover:gap-3 transition-all duration-300">
            Get in Touch
            <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 class="grid grid-cols-3 gap-6 mb-10" data-motion="stats">
          <div>
            <span class="text-3xl font-bold text-indigo-500 block">120+</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">Projects</span>
          </div>
          <div>
            <span class="text-3xl font-bold text-slate-900 dark:text-white block">50+</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">Clients</span>
          </div>
          <div>
            <span class="text-3xl font-bold text-slate-900 dark:text-white block">15</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">Awards</span>
          </div>
        </div>
        <div class="grid grid-cols-3 gap-4">
          <div data-motion="card" class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-4">
            <div data-motion="icon" class="w-10 h-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-3">
              <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="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
              </svg>
            </div>
            <h4 class="text-slate-900 dark:text-white font-semibold text-sm">Design Systems</h4>
          </div>
          <div data-motion="card" class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-4">
            <div data-motion="icon" class="w-10 h-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-3">
              <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
              </svg>
            </div>
            <h4 class="text-slate-900 dark:text-white font-semibold text-sm">User Research</h4>
          </div>
          <div data-motion="card" class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-4">
            <div data-motion="icon" class="w-10 h-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-3">
              <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="M13 10V3L4 14h7v7l9-11h-7z"/>
              </svg>
            </div>
            <h4 class="text-slate-900 dark:text-white font-semibold text-sm">Product Strategy</h4>
          </div>
        </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.