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

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

2 years ago

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

2 years ago

11.6k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

15k
Steps block

Author:
Ron Hicks

2 years ago

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

Author:
Komal Jain

2 years ago

9.5k
List of steps

Author:
Leif99

3 years ago

13.5k
Steps section

Author:
Steven Kuhn

2 years ago

10k
Onboarding steps section

Author:
Prashant

2 years ago

6.1k
Steps section for form
with short description

Author:
Yuni saputara

1 year ago

2.4k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

11 months ago

1.6k
Steps for complex forms

Author:
Ron Hicks

3 years ago

11.6k
How does it work?

Author:
Abdul Baset Bappy

6 months ago

689

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components