<< Go back

Inline list

ul.flex.space-x-4.list-inline
ul.flex.space-x-4.list-unstyled

Standard

Tea
Coffee
Milkshake
Soda

<ul class="flex space-x-4 list-inline">
    <li>Tea</li>
    <li>Coffee</li>
    <li>Milkshake</li>
    <li>Soda</li>
</ul>

Nested

Tea
- Earl Grey
- Lapsang souchong
Coffee
- Espesso
- Flat White
- Latte
Milkshake
- Strawberry
- Chocolate
Soda
- Cola
  - Cherry
  - Lime
- Lemonade
  - Still
  - Sparkling

<ul>
    <li>Tea
        <ul class="flex space-x-4 list-inline">
            <li>Earl Grey</li>
            <li>Lapsang souchong</li>
        </ul>
    </li>
    <li>Coffee
        <ul class="flex space-x-4 list-inline">
            <li>Espesso</li>
            <li>Flat White</li>
            <li>Latte</li>
        </ul>
    </li>
    <li>Milkshake
        <ul class="flex space-x-4 list-inline">
            <li>Strawberry</li>
            <li>Chocolate</li>
        </ul>
    </li>
    <li>Soda
        <ul class="flex space-x-4 list-inline">
            <li>Cola
                <ul>
                    <li>Cherry</li>
                    <li>Lime</li>
                </ul>
            </li>
            <li>Lemonade
                <ul>
                    <li>Still</li>
                    <li>Sparkling</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Nested/Mixed

Tea
- Earl Grey
- Lapsang souchong
Coffee
- Espesso
- Flat White
- Latte
Milkshake
- Strawberry
- Chocolate
Soda
- Cola
  - Cherry
  - Lime
- Lemonade
  - Still
  - Sparkling

<ul>
    <li>Tea
        <ul class="flex space-x-4 list-unstyled">
            <li>Earl Grey</li>
            <li>Lapsang souchong</li>
        </ul>
    </li>
    <li>Coffee
        <ul class="flex space-x-4 list-unstyled">
            <li>Espesso</li>
            <li>Flat White</li>
            <li>Latte</li>
        </ul>
    </li>
    <li>Milkshake
        <ul class="flex space-x-4 list-unstyled">
            <li>Strawberry</li>
            <li>Chocolate</li>
        </ul>
    </li>
    <li>Soda
        <ul class="flex space-x-4 list-unstyled">
            <li>Cola
                <ul>
                    <li>Cherry</li>
                    <li>Lime</li>
                </ul>
            </li>
            <li>Lemonade
                <ul>
                    <li>Still</li>
                    <li>Sparkling</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>