Home
Mereani Waqa
How does it work Steps example

How does it work Steps example

Dark themed steps section

This tailwind example is contributed by Mereani Waqa, on 04-Dec-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats

Author Mereani Waqa

7.8k

Fork Fullscreen

<section id="works" class="relative bg-gray-900 py-10 sm:py-16 lg:py-24">
    <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
        <div class="max-w-2xl mx-auto text-center">
            <h2 class="text-4xl text-white font-extrabold mx-auto md:text-6xl lg:text-5xl">How does it work?</h2>
            <p class="max-w-2xl mx-auto mt-4 text-base text-gray-400 leading-relaxed md:text-2xl">
                Our AI solution will help you from start to finish
            </p>
        </div>
        <div class="relative mt-12 lg:mt-20">
            <div class="absolute inset-x-0 hidden xl:px-44 top-2 md:block md:px-20 lg:px-28"><img alt="" loading="lazy" width="1000" height="500" decoding="async" data-nimg="1" class="w-full" style="color:transparent" src="https://cdn.rareblocks.xyz/collection/celebration/images/steps/2/curved-dotted-line.svg">
            </div>
            <div class="relative grid grid-cols-1 text-center gap-y-12 md:grid-cols-3 gap-x-12">
                <div>
                    <div
                        class="flex items-center justify-center w-16 h-16 mx-auto bg-white border-2 border-gray-200 rounded-full shadow">
                        <span class="text-xl font-semibold text-gray-700">1</span>
                    </div>
                    <h3 class="mt-6 text-xl  text-white font-semibold leading-tight md:mt-10">Select template</h3>
                    <p class="mt-4 text-base text-gray-400 md:text-lg">
                        Select template accourding to your requirement
                    </p>
                </div>
                <div>
                    <div
                        class="flex items-center justify-center w-16 h-16 mx-auto bg-white border-2 border-gray-200 rounded-full shadow">
                        <span class="text-xl font-semibold text-gray-700">2</span>
                    </div>
                    <h3 class="mt-6 text-xl text-white font-semibold leading-tight md:mt-10">Enter Your Details</h3>
                    <p class="mt-4 text-base text-gray-400 md:text-lg">
                        Put in your personalized details and let the AI do the rest.
                    </p>
                </div>
                <div>
                    <div
                        class="flex items-center justify-center w-16 h-16 mx-auto bg-white border-2 border-gray-200 rounded-full shadow">
                        <span class="text-xl font-semibold text-gray-700">3</span>
                    </div>
                    <h3 class="mt-6 text-xl text-white font-semibold leading-tight md:mt-10">Publish it</h3>
                    <p class="mt-4 text-base text-gray-400 md:text-lg">
                        Use output as you like
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="absolute inset-0 m-auto max-w-xs h-[357px] blur-[118px] sm:max-w-md md:max-w-lg"
        style="background:radial-gradient(1.89deg, rgba(34, 78, 95, 0.4) -1000%, rgba(191, 227, 205, 0.26) 1500.74%, rgba(34, 140, 165, 0.41) 56.49%, rgba(28, 47, 99, 0.11) 1150.91%)">
    </div>
</section>

Related Examples

Tailwind stat cards
Highlight key statistics

Author:
Anonymous

2 years ago

10.2k
Statistics card section

Author:
Laurits

2 years ago

17.4k
Stats section with animated counter
Display important stats of your product

Author:
Dipti narayan

2 years ago

11k
Stats Showcase Section
Display key metrics of your product or service beautifully

Author:
Mereani Waqa

2 years ago

5.8k
Statastics cards

Author:
Shakti

2 years ago

14.6k
Basic stat cards

Author:
Santos78

2 years ago

11.3k
How does it work?

Author:
Abdul Baset Bappy

5 months ago

483
Info cards

Author:
Lukas Müller

2 years ago

11.6k
Progress Bar
A progress bar is a UI element that visually represents the completion status of a task or process. It helps users understand how much of a task has been completed and how much remains. Commonly used in forms, file uploads, loading screens, or multi-step processes, it enhances the user experience by providing clear feedback.

Author:
Abhiraj

10 months ago

856
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

12k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11.1k
Metrics overview cards
stat cards

Author:
Quentin Rivers

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components