Home
Iris Callahan
How It Works Steps

How It Works Steps

Forked from> @simon-scheffer/steps-section-3

I have made it minimal and added dark mode support

This tailwind example is contributed by Iris Callahan, on 11-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is stepper

Steps

Author Iris Callahan

1.2k

1

Fork Fullscreen

<div class="p-8 dark:bg-black">
    <h2 class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">How It Works</h2>

<div class="grid gap-6 lg:grid-cols-4 sm:grid-cols-2">
        <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
            <div class="flex items-center justify-between mb-3">
                <p class="font-semibold text-gray-800 dark:text-gray-100">Plan</p>

<svg class="w-5 text-gray-400 transform rotate-90 sm:rotate-0 dark:text-gray-300" 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-sm leading-relaxed text-gray-600 dark:text-gray-400">
                Decide whether you want to extract sensitive information or engage in chat interactions with your PDF.
            </p>
        </div>
        
        <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
            <div class="flex items-center justify-between mb-3">
                <p class="font-semibold text-gray-800 dark:text-gray-100">Upload</p>

<svg class="w-5 text-gray-400 transform rotate-90 sm:rotate-0 dark:text-gray-300" 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-sm leading-relaxed text-gray-600 dark:text-gray-400">
                Upload your PDF file to begin interacting with your document through chat features.
            </p>
        </div>
        
        <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
            <div class="flex items-center justify-between mb-3">
                <p class="font-semibold text-gray-800 dark:text-gray-100">Chat</p>

<svg class="w-5 text-green-500 transform dark:text-green-400" 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-sm leading-relaxed text-gray-600 dark:text-gray-400">
                Initiate a Q&amp;A session with your document, exploring an interactive and engaging reading experience.
            </p>
        </div>
    </div>
</div>

Related Examples

Tailwind stepper example

Author:
Erik Hyatt

2 years ago

11.1k
How it works section with steps
big and bold how it works section with steps

Author:
Carlos

1 year ago

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

Author:
Anonymous

1 year ago

9.4k
Responsive steps section

Author:
Simon Scheffer

2 years ago

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

171
Steps section for form
with short description

Author:
Yuni saputara

1 year ago

2.3k
step
html , css

Author:
Hacker Development

5 months ago

275
List of steps

Author:
Leif99

2 years ago

13.2k
Onboarding steps section

Author:
Prashant

1 year ago

5.9k
Profile Stepper Form
Progressive Profile Form

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

1 year ago

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

Author:
ReddRadar.com

5 months ago

175
Steps / Service Card

Author:
Anonymous

1 year ago

5.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12