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

1.6k

2

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

Loading dots
Black Loading dots

Author:
Anonymous

1 year ago

35.4k
Loading animation using animate-ping

Author:
JaxStone

2 years ago

16.6k
Steps -2

Author:
farisubuntu

9 months ago

1.6k
Spinner

Author:
Sienna

2 years ago

10.3k
Tailwind Spinner(Loader)
simple and precise

Author:
Tamani Phiri

1 year ago

8.5k
Ovel shaped loading spinner

Author:
Freja Jensen

2 years ago

16.8k
Spinner with Multiple Colored Segments

Author:
Anonymous

5 months ago

1.4k
Full Page Loading Overlay

Author:
Prashant

2 years ago

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

Author:
Menna Bashir

4 months ago

648
Loding spinner with image inside

Author:
JaxStone

2 years ago

15.1k
Button With Loader
Tailwind Loader

Author:
Md. Tofayel islam

1 year ago

2.3k
Tailwind spinner
loading spinner component

Author:
Arya

2 years ago

38.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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.1