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

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.7k
Tailwind stepper example

Author:
Erik Hyatt

2 years ago

10.9k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

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

Author:
Anonymous

1 year ago

8.8k
Onboarding steps section

Author:
Prashant

1 year ago

5.7k
Steps section

Author:
Steven Kuhn

2 years ago

9.3k
How It Works Steps

Author:
EliteAI Tools

6 months ago

642
How it works section with steps
big and bold how it works section with steps

Author:
Carlos

9 months ago

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

5 months ago

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

1 year ago

10.8k
Profile Stepper Form
Progressive Profile Form

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.2k
Stepper block
A full-width steps section

Author:
Ron Hicks

2 years ago

11.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components