Home
farisubuntu
Steps -4

Steps -4

This tailwind example is contributed by farisubuntu, on 17-Aug-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader

Spinner / Loading

Author farisubuntu

2.1k

3

Fork Fullscreen

<!--
  Heads up! 👋

This component comes with some `rtl` classes. Please remove them if they are not needed in your project.
-->

<div class="w-full">
  <ol
    class="grid grid-cols-1 divide-x divide-gray-100 overflow-hidden rounded-lg border border-gray-100  sm:grid-cols-3">
    <li class="flex items-center justify-center gap-2 p-4">

<p class="leading-none">
        <strong class="block font-medium"> Details </strong>
        <small class="mt-1"> Some info about you. </small>
      </p>
    </li>

<li class="relative flex items-center justify-center gap-2 bg-gray-50 p-4">
      <span
          class="absolute -left-2 top-1/2 hidden size-4 -translate-y-1/2 rotate-45 border border-gray-100 sm:block ltr:border-b-0 ltr:border-s-0 ltr:bg-white rtl:border-e-0 rtl:border-t-0 rtl:bg-gray-50"
        >
        </span>

<span
          class="absolute -right-2 top-1/2 hidden size-4 -translate-y-1/2 rotate-45 border border-gray-100 sm:block ltr:border-b-0 ltr:border-s-0 ltr:bg-gray-50 rtl:border-e-0 rtl:border-t-0 rtl:bg-white"
        >
        </span>
      <p class="leading-none">
        <strong class="block font-medium"> Address </strong>
        <small class="mt-1"> Where we sending it? </small>
      </p>
    </li>

<li class="flex items-center justify-center gap-2 p-4">

<p class="leading-none">
        <strong class="block font-medium"> Payment </strong>
        <small class="mt-1"> Show us the money. </small>
      </p>
    </li>
  </ol>
</div>

Related Examples

Matha ghurainna Ball
Tailwind Spinner

Author:
khalidrootdevs

1 year ago

5.8k
Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

578
Animated Title
App Logo or Main Title

Author:
khalidrootdevs

1 year ago

6.9k
Spinners with shadow

Author:
Samuel Dawson

2 years ago

8.4k
Ripple Animation

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

7 months ago

1.6k
Spinner with card
Use this animated loading indicator when content inside of a card is still loading.

Author:
Md. Tofayel islam

1 year ago

2.7k
Animated loading dots

Author:
TailwindFlex

2 years ago

16.6k
3D Box

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

1 year ago

5.5k
Loading Overlay
Add loading overlay to your divs

Author:
Prajwal Hallale

3 years ago

24.5k
Button With Loader
Tailwind Loader

Author:
Md. Tofayel islam

1 year ago

2.6k
tailwind loading animation
Spinner component provides a dynamic loader indicator with animated

Author:
Menna Bashir

9 months ago

1.4k
Spinner With Label

Author:
farisubuntu

9 months ago

1.1k

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