Home
Carlos
Shoping form steps

Shoping form steps

This tailwind example is contributed by Carlos, on 21-Sep-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is stepper

Steps

Author Carlos

1.5k

Fork Fullscreen

<div class="max-w-4xl mx-auto p-4">
  <div class="flex flex-wrap -mx-4 ">
    <div class="w-full sm:w-1/2 md:w-1/4 px-4">
      <div class="flex items-center p-4 rounded-lg">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"
          class="text-green-400 shrink-0">
          <path
            d="M13.75 20L17.9167 24.1667L26.25 15.8333M38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64466 38.75 1.25 30.3553 1.25 20C1.25 9.64466 9.64466 1.25 20 1.25C30.3553 1.25 38.75 9.64466 38.75 20Z"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <span class="ml-4 text-base font-semibold text-gray-900">SHIPPING</span>
      </div>
    </div>
    <div class="w-full sm:w-1/2 md:w-1/4 px-4">
      <div class="flex items-center p-4 rounded-lg">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"
          class="text-green-400 shrink-0">
          <path
            d="M13.75 20L17.9167 24.1667L26.25 15.8333M38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64466 38.75 1.25 30.3553 1.25 20C1.25 9.64466 9.64466 1.25 20 1.25C30.3553 1.25 38.75 9.64466 38.75 20Z"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <span class="ml-4 text-base font-semibold text-gray-900">PAYMENT</span>
      </div>
    </div>
    <div class="w-full sm:w-1/2 md:w-1/4 px-4">
      <div class="flex items-center p-4 rounded-lg">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"
          class="text-green-400 shrink-0">
          <path
            d="M13.75 20L17.9167 24.1667L26.25 15.8333M38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64466 38.75 1.25 30.3553 1.25 20C1.25 9.64466 9.64466 1.25 20 1.25C30.3553 1.25 38.75 9.64466 38.75 20Z"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <span class="ml-4 text-base font-semibold text-gray-900">OPTIONS</span>
      </div>
    </div>
    <div class="w-full sm:w-1/2 md:w-1/4 px-4">
      <div class="flex items-center p-4 rounded-lg">
        <div class="inline-flex items-center justify-center rounded-full shrink-0 bg-green-500 text-white font-bold"
          style="width: 37px; height: 37px;">4</div>
        <span class="ml-4 text-base font-semibold text-gray-900">CONFIRMATION</span>
      </div>
    </div>
  </div>
</div>

Related Examples

Steps / Service Card

Author:
Anonymous

1 year ago

5.8k
How It Works Steps
I have made it minimal and added dark mode support

Author:
Iris Callahan

11 months ago

1.2k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

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

9 months ago

1.3k
How It Works Steps

Author:
EliteAI Tools

9 months ago

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

167
Steps section verticle

Author:
Ron Hicks

2 years ago

9.7k
Stepper block
A full-width steps section

Author:
Ron Hicks

2 years ago

12.3k
Steps block

Author:
Ron Hicks

2 years ago

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

Author:
ReddRadar.com

5 months ago

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

Author:
Carlos

1 year ago

2.5k
Profile Stepper Form
Progressive Profile Form

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

1 year ago

4.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components