Pet Supply 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_pet_care_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="relative rounded-3xl overflow-hidden">
      <div class="absolute inset-0">
        <img data-motion="image" src="https://images.unsplash.com/photo-1769117319103-ea3ade5c4749?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxwZXQlMjBkb2clMjBjYXQlMjBjdXRlJTIwc3VwcGx5fGVufDF8MHx8fDE3NjkzMjA1NDJ8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Happy dog" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-linear-to-r from-white/95 via-white/80 to-transparent dark:from-neutral-950/95 dark:via-neutral-950/80 dark:to-transparent"></div>
      </div>
      <div class="relative z-10 py-16 lg:py-24 px-8 lg:px-12 max-w-2xl">
        <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>
            Pet Care
          </span>
          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-[1.1]">
            <span data-animate="heading">Premium Care for</span>
            <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Furry Friends</span>
          </h1>
          <p data-animate="text" class="text-lg text-slate-600 dark:text-neutral-400">
            From nutritious meals to cozy beds, discover everything your pet needs to live their happiest, healthiest life.
          </p>
          <div class="flex flex-wrap gap-4 pt-2">
            <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">
              Shop Now
              <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">
              Learn More
              <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>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-5 mt-8">
      <div data-motion="card" class="p-6 bg-indigo-50 dark:bg-indigo-950/30 rounded-2xl text-center">
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">50K+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Happy Pets</span>
      </div>
      <div data-motion="card" class="p-6 bg-slate-50 dark:bg-neutral-900 rounded-2xl text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">4.9</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">App Rating</span>
      </div>
      <div data-motion="card" class="p-6 bg-slate-50 dark:bg-neutral-900 rounded-2xl text-center">
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">24/7</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Vet Support</span>
      </div>
      <div data-motion="card" class="p-6 bg-indigo-50 dark:bg-indigo-950/30 rounded-2xl text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">Free</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Delivery $50+</span>
      </div>
    </div>
  </div>
</section>
<style>
    @keyframes marquee-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  @keyframes marquee-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
  }
  .marquee-left { animation: marquee-left 35s linear infinite; }
  .marquee-right { animation: marquee-right 35s linear infinite; }
  .marquee-container:hover .marquee-left,
  .marquee-container:hover .marquee-right { animation-play-state: paused; }
  </style>

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.