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

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

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

Author:
Mereani Waqa

1 year ago

5.8k
Info cards for admin panel

Author:
Sophia Baker

2 years ago

11.7k
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

1 year ago

1.5k
ExtraLarge stats section

Author:
Manon Daniel

2 years ago

13.6k
Stats cards for admin panel
This Component is designed to present statistics in a tile format. It comprises a title, a large numeric value, and an icon, creating an eye-catching way to display data.

Author:
Prajwal Hallale

2 years ago

6.8k
Big stat card
Display your statistics boldly

Author:
Nikita

1 year ago

3.5k
Data Metrics Showcase
An information panel designed to instill trust, presenting vital statistics about a service or product. The grid layout offers a clean and organized look for displaying key data.

Author:
Hyun-woo Cho

2 years ago

8.5k
Basic stat cards

Author:
Santos78

2 years ago

11.3k
Responsive Info cards for admin panel
Show stats to the admin dashboard

Author:
Santos78

2 years ago

12k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components