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

868

1

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

Spinner

Author:
Sienna

1 year ago

9.9k
Spinner rings
open ring spinners

Author:
Samuel Dawson

1 year ago

8.7k
Spinner Design
Loader Design spinning loading dark mode supported and responsive

Author:
Shariar Hasan

10 months ago

3.6k
Steps -2

Author:
farisubuntu

4 months ago

801
3D Box

Author:
Samuel Abera

8 months ago

3.3k
Spinner

Author:
Fagundo67

1 year ago

9.7k
Matha ghurainna Ball
Tailwind Spinner

Author:
khalidrootdevs

1 year ago

4.1k
Spinners with shadow

Author:
Samuel Dawson

2 years ago

7.4k
Square loading spinner

Author:
Freja Jensen

1 year ago

12.7k
Dashed spinners

Author:
Samuel Dawson

1 year ago

8.1k
Full Page Loading Overlay

Author:
Prashant

2 years ago

22.5k
Button with loading

Author:
Prem..

2 years ago

16.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ 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

© 2024 TailwindFlex. All Rights Reserved.

v1.9