Step Navigation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<nav aria-label="Progress">
  <ol class="flex items-center overflow-x-auto pb-2">
    <li class="flex items-center overflow-x-auto pb-2">
      <span class="flex items-center justify-center w-8 h-8 bg-indigo-600 text-white text-sm font-medium rounded-full">1</span>
      <span class="ml-3 text-sm font-medium text-gray-900">Account</span>
    </li>
    <li class="flex items-center mx-4">
      <div class="w-12 h-0.5 bg-indigo-600"></div>
    </li>
    <li class="flex items-center overflow-x-auto pb-2">
      <span class="flex items-center justify-center w-8 h-8 bg-indigo-600 text-white text-sm font-medium rounded-full">2</span>
      <span class="ml-3 text-sm font-medium text-gray-900">Profile</span>
    </li>
    <li class="flex items-center mx-4">
      <div class="w-12 h-0.5 bg-gray-200"></div>
    </li>
    <li class="flex items-center overflow-x-auto pb-2">
      <span class="flex items-center justify-center w-8 h-8 bg-gray-200 text-gray-500 text-sm font-medium rounded-full">3</span>
      <span class="ml-3 text-sm font-medium text-gray-500">Payment</span>
    </li>
    <li class="flex items-center mx-4">
      <div class="w-12 h-0.5 bg-gray-200"></div>
    </li>
    <li class="flex items-center overflow-x-auto pb-2">
      <span class="flex items-center justify-center w-8 h-8 bg-gray-200 text-gray-500 text-sm font-medium rounded-full">4</span>
      <span class="ml-3 text-sm font-medium text-gray-500">Confirm</span>
    </li>
  </ol>
</nav>

1
2
3
4
5
6
7
8
9
10
11
12

# Step Navigation

Step / wizard navigation.

## Usage
```bash
npx devsnips add Tailwind/Components/Navigation/step-navigation
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`