Tailwind stepper example

This tailwind example is contributed by Erik Hyatt, on 27-Apr-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is stepper

Steps

Author Erik Hyatt

Tailwind v3.4 11.9k 15

Fork Fullscreen

<h2 class="font-heading dark:text-gray-100 mb-8 text-3xl font-bold lg:text-4xl">Sed ac magna sit amet risus tristique interdum. hac.
    </h2>

<div class="flex">
        <div class="mr-4 flex flex-col items-center">
            <div>
                <div class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-blue-900"><svg
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="h-6 w-6 text-blue-800 dark:text-slate-200">
                        <path d="M12 5l0 14"></path>
                        <path d="M18 13l-6 6"></path>
                        <path d="M6 13l6 6"></path>
                    </svg></div>
            </div>
            <div class="h-full w-px bg-gray-300 dark:bg-slate-500"></div>
        </div>
        <div class="pt-1 pb-8">
            <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 1</p>
            <p class="text-gray-600 dark:text-slate-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
                sagittis, quam nec venenatis lobortis, mirisus tempus nulla, sed porttitor est nibh at nulla. Praesent
                placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus.</p>
        </div>
    </div>

<div class="flex">
        <div class="mr-4 flex flex-col items-center">
            <div>
                <div class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-blue-900"><svg
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="h-6 w-6 text-blue-800 dark:text-slate-200">
                        <path d="M12 5l0 14"></path>
                        <path d="M18 13l-6 6"></path>
                        <path d="M6 13l6 6"></path>
                    </svg></div>
            </div>
            <div class="h-full w-px bg-gray-300 dark:bg-slate-500"></div>
        </div>
        <div class="pt-1 pb-8">
            <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 2</p>
            <p class="text-gray-600 dark:text-slate-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
                sagittis, quam nec venenatis lobortis, mirisus tempus nulla, sed porttitor est nibh at nulla.</p>
        </div>
    </div>

<div class="flex">
        <div class="mr-4 flex flex-col items-center">
            <div>
                <div class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-blue-900"><svg
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="h-6 w-6 text-blue-800 dark:text-slate-200">
                        <path d="M12 5l0 14"></path>
                        <path d="M18 13l-6 6"></path>
                        <path d="M6 13l6 6"></path>
                    </svg></div>
            </div>
            <div class="h-full w-px bg-gray-300 dark:bg-slate-500"></div>
        </div>
        <div class="pt-1 pb-8">
            <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</p>
            <p class="text-gray-600 dark:text-slate-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
                sagittis, quam nec venenatis lobortis, mirisus tempus nulla, sed porttitor est nibh at nulla.</p>
        </div>
    </div>

<div class="flex">
        <div class="mr-4 flex flex-col items-center">
            <div>
                <div
                    class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-blue-900 bg-blue-900">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="h-6 w-6 text-white dark:text-slate-200">
                        <path d="M5 12l5 5l10 -10"></path>
                    </svg>
                </div>
            </div>
        </div>
        <div class="pt-1 ">
            <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Ready!</p>
        </div>
    </div>

</div>

Related Examples

Stepper example
Explain How it works to your audience

Santos78

3 years ago

15.9k
Stepper block
A full-width steps section

Ron Hicks

3 years ago

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

Anonymous

2 years ago

10.8k
Steps block

Ron Hicks

3 years ago

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

3 years ago

12k
Steps section

Steven Kuhn

3 years ago

10.6k
List of steps

Leif99

3 years ago

13.9k
Steps section verticle

Ron Hicks

3 years ago

10.5k
Onboarding steps section

Prashant

2 years ago

6.5k
Responsive steps section

Simon Scheffer

3 years ago

10.2k
Steps for complex forms

Ron Hicks

4 years ago

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

Komal Jain

3 years ago

10.5k
Simple stepper section
multipurpose verticle stepper

S. Patel

3 years ago

11k