Home
Anonymous
Steps / Service Card

Steps / Service Card

This tailwind example is contributed by Anonymous, on 31-Dec-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is stepper

Steps

Author Anonymous

4.1k

Fork Fullscreen

<div class="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3 p-4 md:p-8">
    
    <div
        class="p-8 py-12 sm:p-12 rounded-3xl bg-white border border-gray-100 bg-opacity-50 shadow-2xl shadow-gray-600/10">
        <div class="space-y-12">
            <div class="m-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-50">
                <span class="font-bold text-xl text-green-600">1</span>
            </div>
            <div class="space-y-4">
                <h3 class="text-2xl font-semibold text-gray-800 transition">Data Collection</h3>
                <p class="text-gray-600">Upload diverse datasets containing various types of information for analysis.
                </p>
            </div>
        </div>
    </div>

<div
        class="p-8 py-12 sm:p-12 rounded-3xl bg-white border border-gray-100 bg-opacity-50 shadow-2xl shadow-gray-600/10">
        <div class="space-y-12">
            <div class="m-auto flex h-12 w-12 items-center justify-center rounded-full bg-orange-50">
                <span class="font-bold text-xl text-orange-600">2</span>
            </div>
            <div class="space-y-4">
                <h3 class="text-2xl font-semibold text-gray-800 transition">Model Training</h3>
                <p class="text-gray-600">Allow the AI model to learn patterns and insights from the provided data. This
                    may take some time.</p>
            </div>
        </div>
    </div>

<div
        class="p-8 py-12 sm:p-12 rounded-3xl bg-white border border-gray-100 bg-opacity-50 shadow-2xl shadow-gray-600/10">
        <div class="space-y-12">
            <div class="m-auto flex h-12 w-12 items-center justify-center rounded-full bg-purple-50">
                <span class="font-bold text-xl text-purple-600">3</span>
            </div>
            <div class="space-y-4">
                <h3 class="text-2xl font-semibold text-gray-800 transition">Insights Delivery</h3>
                <p class="text-gray-600">Receive comprehensive insights and analysis results based on the trained AI
                    model.</p>
            </div>
        </div>
    </div>
</div>

Related Examples

Steps section for explaining process
Step component with a curved line connecting all steps

Author:
Anonymous

11 months ago

7k
Stepper example
Explain How it works to your audience

Author:
Santos78

1 year ago

12.4k
Process Steps Grid
A structured way to present information about each step, along with corresponding icons and descriptions. Each step card is designed with a hover effect.

Author:
Computer guy

1 year ago

9.3k
Steps block

Author:
Ron Hicks

1 year ago

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

Author:
Komal Jain

1 year ago

7.9k
List of steps

Author:
Leif99

1 year ago

12.3k
Steps section

Author:
Steven Kuhn

1 year ago

8.4k
Onboarding steps section

Author:
Prashant

11 months ago

4.2k
How it works section with steps
big and bold how it works section with steps

Author:
Carlos

2 months ago

306
Stepper block
A full-width steps section

Author:
Ron Hicks

1 year ago

10.4k
Shoping form steps

Author:
Carlos

2 months ago

292
How It Works Steps
I have made it minimal and added dark mode support

Author:
Iris Callahan

1 week ago

11

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent