Law Firm 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_legal_services_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-8 lg:gap-16 items-end mb-16">
      <div data-motion="hero" class="space-y-6">
        <span data-motion="badge" class="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase">
          <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
          Legal Excellence
        </span>
        <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white leading-[1.1]">
          <span data-animate="heading">Strategic</span>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Counsel</span>
          <span data-animate="heading"> for Complex Matters</span>
        </h1>
      </div>
      <div data-motion="image" class="relative rounded-3xl overflow-hidden aspect-4/3">
        <img data-motion="image" src="https://images.unsplash.com/photo-1620662831351-9f68f76d0b9a?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxsYXd5ZXIlMjBhdHRvcm5leSUyMGxlZ2FsJTIwZmlybXxlbnwxfDB8fHwxNzY5MzE5OTI5fDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Modern law office" class="w-full h-full object-cover">
        <div class="absolute bottom-4 left-4 px-4 py-2 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xs rounded-xl">
          <span class="text-indigo-600 dark:text-indigo-400 text-2xl font-bold">25+</span>
          <span class="text-slate-600 dark:text-neutral-400 text-sm ml-2">Years of Practice</span>
        </div>
      </div>
    </div>
    <div class="grid lg:grid-cols-3 gap-8 lg:gap-12 mb-16">
      <div data-motion="card" class="space-y-4">
        <p data-animate="text" class="text-lg text-slate-600 dark:text-neutral-400 leading-relaxed">
          Navigate the complexities of corporate law, litigation, and regulatory compliance with a team that understands your business objectives.
        </p>
      </div>
      <div data-motion="card" class="space-y-4">
        <p data-animate="text" class="text-slate-600 dark:text-neutral-400 leading-relaxed">
          Our attorneys bring decades of experience across industries, delivering tailored strategies that protect your interests and drive favorable outcomes.
        </p>
      </div>
      <div data-motion="card" class="flex flex-col gap-4">
        <a data-motion="button" href="#" class="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-full transition-colors w-fit">
          Schedule Consultation
          <svg class="w-4 h-4" 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>
        <a data-motion="button" href="#" class="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 font-semibold hover:gap-3 transition-all duration-300 w-fit">
          View Practice Areas
          <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 mb-12"></div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
      <div data-motion="card" class="text-center">
        <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">Success Rate</span>
      </div>
      <div data-motion="card" class="text-center">
        <span class="text-4xl font-bold text-slate-900 dark:text-white block">500+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Clients Served</span>
      </div>
      <div data-motion="card" class="text-center">
        <span class="text-4xl font-bold text-slate-900 dark:text-white block">$2B+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Cases Resolved</span>
      </div>
      <div data-motion="card" class="text-center">
        <span class="text-4xl font-bold text-slate-900 dark:text-white block">15</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Practice Areas</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.