Steps / Service Card

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

Steps

Author Anonymous

Tailwind v3.4 6.8k 8

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

Anonymous

2 years ago

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

Computer guy

2 years ago

12k
Stepper example
Explain How it works to your audience

Santos78

3 years ago

15.8k
Steps block

Ron Hicks

3 years ago

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

Komal Jain

2 years ago

10.4k
List of steps

Leif99

3 years ago

13.9k
Steps section

Steven Kuhn

3 years ago

10.6k
Onboarding steps section

Prashant

2 years ago

6.5k
Steps section verticle

Ron Hicks

3 years ago

10.5k
Steps for complex forms

Ron Hicks

4 years ago

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

Abhiraj

1 year ago

2.9k
Stepper block
A full-width steps section

Ron Hicks

3 years ago

13k