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

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

Steps section
Show features or steps of your website. Each step Includes Icons.

Author:
Komal Jain

1 year ago

8.4k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

8 months ago

1.2k
Simple Multi-Purpose Slider
This is a very minimalistic though very usable slider for various situations like CTA's, quotes or other uncomplicated content. I only used Tailwindcss which makes it very lightweight, but due to limitations it's not as flexible as I wished for. This could be easily achieved by a little piece of JS to make it as dynamic as you wish.

Author:
Hielke Brandsma

4 months ago

1.1k
Our services component

Author:
Anonymous

8 months ago

980
Features grid with icon

Author:
Freja Jensen

2 years ago

9.8k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

10 months ago

3.5k
Facts
A simple facts overview

Author:
Matti

3 months ago

264
Product Feature Section
present multiple product features in a grid layout. Each feature is represented by an icon, title, and description.

Author:
Elsabe Fourie

1 year ago

7.6k
House Cleaning Website Services Section
House Cleaning Website Services Section Photo by @candjstudios & @framesforyourheart on Unsplash

Author:
Samuel Abera

11 months ago

5.7k
countdown with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

10 months ago

1.6k
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Author:
Akram Khan

8 months ago

1.5k
why choose us (features showcase) example

Author:
Erik Hyatt

1 year ago

15.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components