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.3k

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 cards with icons on top

Author:
Manon Daniel

2 years ago

16.3k
Dark mode with Tailwind CSS and alpinjs

Author:
Michael Andreuzza

1 year ago

3.1k
Our services component

Author:
Anonymous

1 year ago

1.6k
Responsive Features Section

Author:
ariaw

5 months ago

705
Feature Overview Section with Dark Mode Support
Feature cards with icon

Author:
Nomusa Botha

9 months ago

1.5k
Features list with icons on top

Author:
Lina Lindström

2 years ago

9.4k
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

2 months ago

601
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2k
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

1 year ago

1.7k
Feature Section
A section that allows you to share features about your product and an example of your product

Author:
Andrew Weisbeck

1 year ago

2.3k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

1 year ago

8.9k
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:
Amit Pachange

3 years ago

51.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components