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

1.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

Feature Highlights cards

Author:
Carla Hoffman

9 months ago

1.5k
interactive testimonial with Tailwind CSS and Alpine.js

Author:
Michael Andreuzza

7 months ago

1.2k
Feature Section Cards

Author:
Akram Khan

5 months ago

923
Facts
A simple facts overview

Author:
Matti

2 weeks ago

15
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
kzsamir849

6 months ago

846
Features section
Showcase your key features

Author:
Manon Daniel

1 year ago

13.9k
Basic features section
Display your most important features

Author:
Dipti narayan

1 year ago

5.6k
Product feature section
Showcase product features with an image

Author:
Anonymous

1 year ago

11.4k
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Author:
Alok

2 years ago

19.3k
Warb feature
Here another idea... [update] - mobile device fixed (curr iPh, Smg)

Author:
Matti

1 day ago

17
Feature cards

Author:
Fagundo67

1 year ago

9.7k
Feature: Switch-Special
Here a special feature-showcase. I hope you like it ;)

Author:
Matti

2 weeks ago

46

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components