Home
Simon Scheffer
Responsive steps section

Responsive steps section

This tailwind example is contributed by Simon Scheffer, on 12-Dec-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is stepper

Steps

Author Simon Scheffer

8.6k

Fork Fullscreen

<div class="grid gap-10 lg:grid-cols-4 sm:grid-cols-2">
        <div>
            <div class="flex items-center justify-between mb-6">
                <p class="text-2xl font-bold">Step 1</p>
                <svg class="w-6 text-gray-700 transform rotate-90 sm:rotate-0" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                    <line fill="none" stroke-miterlimit="10" x1="2" y1="12" x2="22" y2="12"></line>
                    <polyline fill="none" stroke-miterlimit="10" points="15,5 22,12 15,19 "></polyline>
                </svg>
            </div>
            <p class="text-gray-600">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

</p>
        </div>
        <div>
            <div class="flex items-center justify-between mb-6">
                <p class="text-2xl font-bold">Step 2</p>
                <svg class="w-6 text-gray-700 transform rotate-90 sm:rotate-0" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                    <line fill="none" stroke-miterlimit="10" x1="2" y1="12" x2="22" y2="12"></line>
                    <polyline fill="none" stroke-miterlimit="10" points="15,5 22,12 15,19 "></polyline>
                </svg>
            </div>
            <p class="text-gray-600">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
            </p>
        </div>
        <div>
            <div class="flex items-center justify-between mb-6">
                <p class="text-2xl font-bold">Step 3</p>
                <svg class="w-6 text-gray-700 transform rotate-90 sm:rotate-0" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                    <line fill="none" stroke-miterlimit="10" x1="2" y1="12" x2="22" y2="12"></line>
                    <polyline fill="none" stroke-miterlimit="10" points="15,5 22,12 15,19 "></polyline>
                </svg>
            </div>
            <p class="text-gray-600">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
            </p>
        </div>
        <div>
            <div class="flex items-center justify-between mb-6">
                <p class="text-2xl font-bold">Success</p>
                <svg class="w-8 text-gray-600" stroke="currentColor" viewBox="0 0 24 24">
                    <polyline fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        stroke-miterlimit="10" points="6,12 10,16 18,8"></polyline>
                </svg>
            </div>
            <p class="text-gray-600">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
            </p>
        </div>
    </div>
</div>

Related Examples

Steps block

Author:
Ron Hicks

2 years ago

11.4k
Tailwind stepper example

Author:
Erik Hyatt

1 year ago

10.5k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

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

Author:
Anonymous

1 year ago

8.2k
Onboarding steps section

Author:
Prashant

1 year ago

5.1k
Steps section

Author:
Steven Kuhn

2 years ago

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

2 months ago

577
List of steps

Author:
Leif99

2 years ago

12.9k
Tailwind simple stepper component

Author:
Santiago Hernandez

11 months ago

2.2k
Steps for complex forms

Author:
Ron Hicks

2 years ago

10.6k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

9.4k
Steps section for form
with short description

Author:
Yuni saputara

10 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components