How it work

This tailwind example is contributed by JUGENDRA GANGWAR, on 05-Nov-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author JUGENDRA GANGWAR

Tailwind v3.4 2

Fork Fullscreen

<section class="relative isolate flex min-h-[630px] items-center justify-center overflow-hidden bg-neutral-950 px-5 py-20 sm:px-8 lg:min-h-[630px]">
    <div class="absolute inset-0 -z-20">
        <img src="https://img.magnific.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?t=st=1793893808~exp=1793897408~hmac=9a214f8b986759d6e903c1124c0c3b64175553bc200e200c5d4845cf88dbd8e1&w=1480" alt="" class="h-full w-full object-cover object-center">
    </div>
    <div class="absolute inset-0 -z-10 bg-black/65"></div>
    <div class="absolute inset-0 -z-10 bg-gradient-to-b from-black/30 via-transparent to-black/40"></div>
    <div class="mx-auto w-full max-w-[1000px]">
        <div class="mb-10 text-center sm:mb-12">
            <h2 class="text-3xl font-normal tracking-tight text-white sm:text-4xl lg:text-[42px]">
                How it <em class="font-serif font-normal text-white/65">works</em>
            </h2>
            <p class="mt-2 text-sm text-white sm:text-base">
                Your first visit, step by step.
            </p>
        </div>
        <div class="grid grid-cols-1 gap-5 md:grid-cols-3">
            <article class="flex flex-col rounded-[20px] border border-white/20 bg-[#141414]/75 px-5 pb-6 pt-6 text-white backdrop-blur-xl sm:px-6">
                <div class="flex flex-1 flex-col items-center text-center">
                    <span class="flex h-16 w-16 items-center justify-center rounded-full border border-white/80 text-xl font-semibold">1</span>
                    <h3 class="mt-3 text-xl font-medium">
                        Book <em class="font-serif font-normal text-white/65">online</em>
                    </h3>
                    <p class="mt-2 max-w-[270px] text-sm leading-[1.6] text-white/90">
                        Choose your studio, class type, and time that works for you.
                    </p>
                </div>
                <div class="mt-5 border-b border-white/30">
                    <button type="button" class="accordion-trigger flex w-full items-center justify-between gap-3 py-3 text-left text-sm font-medium" aria-expanded="false">
                        <span>Do I need to be fit to start?</span>
                        <span class="accordion-icon flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#e8dfd2] text-black transition-transform duration-300">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6"/>
                            </svg>
                        </span>
                    </button>
                    <div class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300">
                        <div class="overflow-hidden">
                            <p class="pb-4 text-sm leading-relaxed text-white/75">
                                Not at all — classes are designed for every fitness level, and your instructor will guide you.
                            </p>
                        </div>
                    </div>
                </div>
            </article>
            <article class="flex flex-col rounded-[20px] border border-white/20 bg-[#141414]/75 px-5 pb-6 pt-6 text-white backdrop-blur-xl sm:px-6">
                <div class="flex flex-1 flex-col items-center text-center">
                    <span class="flex h-16 w-16 items-center justify-center rounded-full border border-white/80 text-xl font-semibold">2</span>
                    <h3 class="mt-3 text-xl font-medium">
                        Arrive 15 min <em class="font-serif font-normal text-white/65">early</em>
                    </h3>
                    <p class="mt-2 max-w-[270px] text-sm leading-[1.6] text-white/90">
                        Meet your instructor, get set up on the reformer, and settle in.
                    </p>
                </div>
                <div class="mt-5 border-b border-white/30">
                    <button type="button" class="accordion-trigger flex w-full items-center justify-between gap-3 py-3 text-left text-sm font-medium" aria-expanded="false">
                        <span>What should I wear?</span>
                        <span class="accordion-icon flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#e8dfd2] text-black transition-transform duration-300">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6"/>
                            </svg>
                        </span>
                    </button>
                    <div class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300">
                        <div class="overflow-hidden">
                            <p class="pb-4 text-sm leading-relaxed text-white/75">
                                Comfortable athletic wear that lets you move. Grip socks are required and available for purchase.
                            </p>
                        </div>
                    </div>
                </div>
            </article>
            <article class="flex flex-col rounded-[20px] border border-white/20 bg-[#141414]/75 px-5 pb-6 pt-6 text-white backdrop-blur-xl sm:px-6">
                <div class="flex flex-1 flex-col items-center text-center">
                    <span class="flex h-16 w-16 items-center justify-center rounded-full border border-white/80 text-xl font-semibold">3</span>
                    <h3 class="mt-3 text-xl font-medium">
                        Your guided <em class="font-serif font-normal text-white/65">class</em>
                    </h3>
                    <p class="mt-2 max-w-[270px] text-sm leading-[1.6] text-white/90">
                        Enjoy a supportive, full-body workout tailored to your level.
                    </p>
                </div>
                <div class="mt-5 border-b border-white/30">
                    <button type="button" class="accordion-trigger flex w-full items-center justify-between gap-3 py-3 text-left text-sm font-medium" aria-expanded="false">
                        <span>How long is a class?</span>
                        <span class="accordion-icon flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#e8dfd2] text-black transition-transform duration-300">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6"/>
                            </svg>
                        </span>
                    </button>
                    <div class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300">
                        <div class="overflow-hidden">
                            <p class="pb-4 text-sm leading-relaxed text-white/75">
                                Our Intro Class is 30 minutes. After class, we look forward to setting up your program with you.
                            </p>
                        </div>
                    </div>
                </div>
            </article>
        </div>
        <div class="mt-9 flex justify-center">
            <a href="#get-started" class="inline-flex items-center justify-center rounded-full border border-white px-6 py-2 text-sm font-semibold text-white transition-all duration-300 hover:bg-white hover:text-black">
                Get started
            </a>
        </div>
    </div>
</section>

button.setAttribute('aria-expanded', String(!isExpanded));
            panel.classList.toggle('grid-rows-[1fr]', !isExpanded);
            panel.classList.toggle('grid-rows-[0fr]', isExpanded);
            button.querySelector('.accordion-icon').classList.toggle('rotate-180', !isExpanded);
        });
    });
</script>

Related Examples

pages / slides

MD Fardous Alom

1 year ago

2.3k
random design

QQ-VVN

1 year ago

1.2k
HTMLCODE
123

Anonymous

1 year ago

1k
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k
Maintenance page

Faye

1 year ago

2.7k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

2k
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Nick Girga

1 year ago

2k
About Us Component

KULDEEP

1 year ago

2.1k
Text Overlay Effect
This is a text overlay effect, featuring a subtle background title and a prominent foreground heading. This design enhances visual interest while maintaining a clean, modern aesthetic.

Anum Shahana

2 years ago

2.3k
why chose us
Designed with clarity and purpose, each section of our website is crafted to guide users effortlessly from engaging visuals to structured content that highlights our values and builds trust at every scroll. abnahid.com

Abdul Jabbar Al Nahid

1 year ago

867
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

SANJAY SINGH GARIYA

1 year ago

2.3k
Plant Game
Checking to see if it works

Becky Keyworth

1 year ago

1.1k