Specialty Pet Store 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_organic_products_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-3 gap-5">
      <div data-motion="image" class="lg:col-span-2 lg:row-span-2 rounded-3xl overflow-hidden relative aspect-4/3 lg:aspect-auto">
        <img data-motion="image" src="https://images.unsplash.com/photo-1720540890371-8586a1bcc23f?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxwZXQlMjBkb2clMjBjYXQlMjBjdXRlJTIwc3BlY2lhbHR5fGVufDF8MHx8fDE3NjkzMjA1NDV8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Fresh organic vegetables" class="w-full h-full object-cover">
        <div class="absolute bottom-6 left-6 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">100%</span>
          <span class="text-slate-600 dark:text-neutral-400 text-sm ml-2">Certified Organic</span>
        </div>
      </div>
      <div data-motion="hero" class="p-8 bg-indigo-50 dark:bg-indigo-950/30 rounded-3xl">
        <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 mb-4">
          <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
          Organic Living
        </span>
        <h1 class="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-white leading-[1.1] mb-4">
          <span data-animate="heading">Pure Nature,</span>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Pure Living</span>
        </h1>
        <p data-animate="text" class="text-slate-600 dark:text-neutral-400 mb-6">
          Embrace a healthier lifestyle with our premium organic products. Sustainably sourced and delivered fresh.
        </p>
        <a data-motion="button" href="#" class="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-full transition-colors text-sm">
          Shop Collection
          <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>
      </div>
      <div data-motion="image" class="rounded-3xl overflow-hidden aspect-square">
        <img data-motion="image" src="https://images.unsplash.com/photo-1586836605723-75808365c303?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxwZXQlMjBkb2clMjBjYXQlMjBjdXRlJTIwc3BlY2lhbHR5fGVufDF8MHx8fDE3NjkzMjA1NDV8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Fresh fruits" class="w-full h-full object-cover">
      </div>
      <div data-motion="card" class="p-6 bg-slate-50 dark:bg-neutral-900 rounded-2xl flex flex-col justify-center">
        <span class="text-3xl font-bold text-slate-900 dark:text-white">50K+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Happy Customers</span>
      </div>
      <div data-motion="card" class="p-6 bg-slate-50 dark:bg-neutral-900 rounded-2xl flex flex-col justify-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">200+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Organic Products</span>
      </div>
      <div data-motion="card" class="p-6 bg-slate-50 dark:bg-neutral-900 rounded-2xl flex flex-col justify-center">
        <span class="text-3xl font-bold text-slate-900 dark:text-white">15+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Years Experience</span>
      </div>
    </div>
    <div data-motion="social-proof" class="mt-12 flex flex-wrap items-center justify-center gap-8">
      <div class="flex items-center gap-2 text-slate-500 dark:text-neutral-400">
        <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
        </svg>
        <span class="text-sm">USDA Certified</span>
      </div>
      <div class="flex items-center gap-2 text-slate-500 dark:text-neutral-400">
        <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <span class="text-sm">Sustainably Sourced</span>
      </div>
      <div class="flex items-center gap-2 text-slate-500 dark:text-neutral-400">
        <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
        </svg>
        <span class="text-sm">Free Delivery</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.