Home
Ron Hicks
Stepper block

Stepper block

A full-width steps section

This tailwind example is contributed by Ron Hicks, on 06-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is stepper

Steps

Author Ron Hicks

12.5k

Fork Fullscreen

<div class="text-center">
            <p class="mt-4 text-sm leading-7 text-gray-500 font-regular">
                STEPS
            </p>
            <h3 class="text-3xl sm:text-5xl leading-normal font-extrabold tracking-tight text-gray-900">
                How it <span class="text-indigo-600">Works?</span>
            </h3>

</div>

<li class="text-left mb-10">
                    <div class="flex flex-row items-start">
                        <div class="flex flex-col items-center justify-center mr-5">
                            <div
                                class="flex items-center justify-center h-20 w-20 rounded-full bg-indigo-500 text-white border-4 border-white text-xl font-semibold">
                                1
                            </div>
                            <span class="text-gray-500">STEP</span>
                        </div>
                        <div class="bg-gray-100 p-5 pb-10 ">
                            <h4 class="text-lg leading-6 font-semibold text-gray-900">Enter Headline</h4>
                            <p class="mt-2 text-base leading-6 text-gray-500">
                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis
                                suscipit eaque, iste dolor cupiditate blanditiis ratione.
                            </p>
                        </div>
                    </div>
                </li>
                <li class="text-left mb-10">
                    <div class="flex flex-row items-start">
                        <div class="flex flex-col items-center justify-center mr-5">
                            <div
                                class="flex items-center justify-center h-20 w-20 rounded-full bg-indigo-500 text-white border-4 border-white text-xl font-semibold">
                                2
                            </div>
                            <span class="text-gray-500">STEP</span>
                        </div>
                        <div class="bg-gray-100 p-5 pb-10 ">
                            <h4 class="text-lg leading-6 font-semibold text-gray-900">Enter Headline</h4>
                            <p class="mt-2 text-base leading-6 text-gray-500">
                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis
                                suscipit eaque, iste dolor cupiditate blanditiis ratione.
                            </p>
                        </div>
                    </div>
                </li>
                <li class="text-left mb-10">
                    <div class="flex flex-row items-start">
                        <div class="flex flex-col items-center justify-center mr-5">
                            <div
                                class="flex items-center justify-center h-20 w-20 rounded-full bg-indigo-500 text-white border-4 border-white text-xl font-semibold">
                                3
                            </div>
                            <span class="text-gray-500">STEP</span>
                        </div>
                        <div class="bg-gray-100 p-5 pb-10 ">
                            <h4 class="text-lg leading-6 font-semibold text-gray-900">Enter Headline</h4>
                            <p class="mt-2 text-base leading-6 text-gray-500">
                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis
                                suscipit eaque, iste dolor cupiditate blanditiis ratione.
                            </p>
                        </div>
                    </div>
                </li>

</ul>
        </div>

</div>
</div>

Related Examples

Tailwind stepper example

Author:
Erik Hyatt

2 years ago

11.3k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

15.1k
Steps block

Author:
Ron Hicks

2 years ago

12.3k
Steps section verticle

Author:
Ron Hicks

3 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
Steps section for explaining process
Step component with a curved line connecting all steps

Author:
Anonymous

2 years ago

9.8k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

10.3k
Steps for complex forms

Author:
Ron Hicks

3 years ago

11.6k
Steps section

Author:
Steven Kuhn

3 years ago

10k
List of steps

Author:
Leif99

3 years ago

13.6k
Onboarding steps section

Author:
Prashant

2 years ago

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

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components