Services showcase Section

With hover effect on cards

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

Feature showcase

Author Anonymous

Tailwind v3.4 3.2k 5

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 showcase cards

bara masalma

1 year ago

2.1k
Our services component

Anonymous

2 years ago

2.7k
Showcase Your Services with Interactive Animations: A Modern HTML and Tailwind CSS Example
Discover how to create an eye-catching services section using plain HTML and Tailwind CSS. This modern example features interactive animations that bring your services to life. With smooth hover effects and responsive design, this section is perfect for enhancing your website's user experience. Easily customize the content to fit your needs, and let Tailwind CSS handle the styling and transitions for a polished, professional look.

Hezron Okoko

2 years ago

3.5k
Our services component

Kris Showen

3 years ago

10.6k
Responsive Features Section

Abdul Baset Bappy

1 year ago

1.7k
Dark mode with Tailwind CSS and alpinjs

Michael Andreuzza

2 years ago

4.1k
Features list with icons

L.J. Weber

3 years ago

15.2k
Feature cards

Fagundo67

3 years ago

11.5k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Mike Varen

2 years ago

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

Matti

1 year ago

2.2k
What is Webby
Webby is a PHP Framework built on top of Codeigniter 3 for easy PHP web application development using both HMVC and MVC patterns.

Developer Kwame

2 years ago

2.6k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Mike Varen

2 years ago

5.2k