Home
S. Patel
Simple stepper section

Simple stepper section

multipurpose verticle stepper

This tailwind example is contributed by S. Patel, on 24-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are stepper,Roadmap, Changelog

Steps Timeline

Author S. Patel

10.1k

Fork Fullscreen

<div class="p-4 flex flex-col gap-4">
    <div class="flex flex-col md:flex-row max-w-sm space-y-4 md:space-y-0 md:space-x-4">
        <div class="flex-shrink-0 -mb-6 mt-4 z-20">
            <div class="h-10 w-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">1
            </div>
        </div>
        <div class="flex-1">
            <div class="bg-gray-200 rounded-lg px-4 py-2">
                <h3 class="font-medium text-lg">Step 1</h3>
                <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>

<div class="flex flex-col md:flex-row max-w-sm space-y-4 md:space-y-0 md:space-x-4">
        <div class="flex-shrink-0 -mb-6 mt-4 z-20">
            <div class="h-10 w-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">2
            </div>
        </div>
        <div class="flex-1">
            <div class="bg-gray-200 rounded-lg px-4 py-2">
                <h3 class="font-medium text-lg">Step 2</h3>
                <p class="mt-2">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>

<div class="flex flex-col md:flex-row max-w-sm space-y-4 md:space-y-0 md:space-x-4">
        <div class="flex-shrink-0 -mb-6 mt-4 z-20">
            <div class="h-10 w-10 bg-green-500  rounded-full flex items-center justify-center text-white font-bold">3
            </div>
        </div>
        <div class="flex-1">
            <div class="bg-gray-200 rounded-lg px-4 py-2">
                <h3 class="font-medium text-lg">Step 3</h3>
                <p class="mt-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                    commodo consequat.</p>
            </div>
        </div>
    </div>
</div>

Related Examples

Stepper block
A full-width steps section

Author:
Ron Hicks

2 years ago

12.3k
Timeline
Beautiful Tailwind timeline

Author:
Brandon D

3 years ago

16.1k
Timeline | Roadmap example
Display Recent Updates, Timeline or Rroadmap with this component

Author:
Anja Müller

2 years ago

12.5k
Event Timeline
Timeline component for tracking the progression of events over time. It features alternating card sections

Author:
Komal Jain

2 years ago

11.6k
Tailwind stepper example

Author:
Erik Hyatt

2 years ago

11.1k
Timeline
Timeline for tracking status of the things

Author:
Akshay

3 years ago

11k
Steps for complex forms

Author:
Ron Hicks

3 years ago

11.4k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

14.7k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

165
Timeline Component
This component is responsive for Mobile & Desktop & Dark mode Supported.

Author:
Shariar Hasan

1 year ago

3.8k
Clean How to Use Section
Minimal how to use guide section

Author:
ReddRadar.com

5 months ago

175
Sticky Changelog

Author:
Michael Andreuzza

1 year ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components