Home
Anonymous
Services showcase Section

Services showcase Section

With hover effect on cards

This tailwind example is contributed by Anonymous, on 07-May-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Feature showcase

Author Anonymous

2.1k

Fork Fullscreen

<section class="feature__section bg-[#F4F4F7]">
  <div class="max-w-5xl px-7 lg:px-10 py-14 mx-auto">
    <div class="flex flex-col gap-y-3">
      <p class="text-sm text-[#1EBFC1]">FITNESS CLASSES</p>
      <h2 class="text-3xl md:text-3xl lg:text-4xl md:max-w-lg font-bold text-zinc-800">Join Our Fitness Classes</h2>
      <p class="md:max-w-lg">Explore our range of fitness classes tailored to your needs, designed to help you achieve
        your fitness goals.</p>
    </div>
    <div class="w-full pt-10 lg:w-full relative isolate grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
      <div
        class="grid grid-rows-1 p-5 bg-white rounded-xl gap-y-2 w-full border border-slate-500/50 hover:shadow-[5px_5px_0_rgba(0,0,0,0.5)] transition-shadow duration-150 ease-linear cursor-pointer">
        <div class="flex flex-col gap-y-2.5">
          <h3 class="text-lg font-semibold">Yoga</h3>
          <p class="text-xl font-semibold">$150</p>
        </div>
        <p class="text-slate-700/70 text-base">Find balance and inner peace with our yoga classes led by experienced
          instructors.</p>
        <div class="flex items-center justify-between pt-5 w-full">
          <p class="bg-[#E0F7F6] px-2 py-0.5 text-sm rounded border border-cyan-500">30 classes</p>
          <p class="bg-gray-200 px-2 py-0.5 text-sm rounded border border-gray-300">2 months</p>
        </div>
      </div>
      <div
        class="grid grid-rows-1 p-5 bg-white rounded-xl gap-y-2 w-full border border-slate-500/50 hover:shadow-[5px_5px_0_rgba(0,0,0,0.5)] transition-shadow duration-150 ease-linear cursor-pointer">
        <div class="flex flex-col gap-y-2.5">
          <h3 class="text-lg font-semibold">HIIT</h3>
          <p class="text-xl font-semibold">$200</p>
        </div>
        <p class="text-slate-700/70 text-base">Burn calories and boost your metabolism with high-intensity interval
          training sessions.</p>
        <div class="flex items-center justify-between pt-5 w-full">
          <p class="bg-[#E0F7F6] px-2 py-0.5 text-sm rounded border border-cyan-500">20 classes</p>
          <p class="bg-gray-200 px-2 py-0.5 text-sm rounded border border-gray-300">1.5 months</p>
        </div>
      </div>
      <div
        class="grid grid-rows-1 p-5 bg-white rounded-xl gap-y-2 w-full border border-slate-500/50 hover:shadow-[5px_5px_0_rgba(0,0,0,0.5)] transition-shadow duration-150 ease-linear cursor-pointer">
        <div class="flex flex-col gap-y-2.5">
          <h3 class="text-lg font-semibold">Pilates</h3>
          <p class="text-xl font-semibold">$180</p>
        </div>
        <p class="text-slate-700/70 text-base">Strengthen and tone your muscles while improving flexibility and posture
          with Pilates.</p>
        <div class="flex items-center justify-between pt-5 w-full">
          <p class="bg-[#E0F7F6] px-2 py-0.5 text-sm rounded border border-cyan-500">25 classes</p>
          <p class="bg-gray-200 px-2 py-0.5 text-sm rounded border border-gray-300">2 months</p>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples