Get started with a collection of list components built with Tailwind CSS for ordered and unordered lists with bullets, numbers, or icons and other styles and layouts to show a list of items inside an article or throughout your web page. ## Unordered list Use this example to create a default unordered list of items using the `list-disc` class. ```html

Password requirements:

``` ### Icons This example can be used to apply custom icons instead of the default bullets for the list items. ```html

Password requirements:

``` ### Nested Use this example to nested another list of items inside the parent list element. ```html ``` ### Unstyled Use the `list-none` class to disable the list style bullets or numbers. ```html

Password requirements:

``` ## Ordered list Use the `
    ` tag to create an ordered list of items with numbers. ```html

    Top students:

    1. Bonnie Green with 70 points
    2. Jese Leos with 63 points
    3. Leslie Livingston with 57 points
    ``` ### Nested This example can be used to nest multiple lists into each other. ```html
    1. List item one
      • You might feel like you are being really "organized" o
      • Nested navigation in UIs is a bad idea too, keep things as flat as possible.
      • Nesting tons of folders in your source code is also not helpful.
    2. List item two
      • I'm not sure if we'll bother styling more than two levels deep.
      • Two is already too much, three is guaranteed to be a bad idea.
      • If you nest four levels deep you belong in prison.
    3. List item three
      • Again please don't nest lists if you want
      • Nobody wants to look at this.
      • I'm upset that we even have to bother styling this.
    ``` ## Description list Create a description list by using the `
    ` tag and set the term and name with the following example. ```html
    Email address
    yourname@flowbite.com
    Home address
    92 Miles Drive, Newark, NJ 07103, California, USA
    Phone number
    +00 123 456 789 / +12 345 678
    ``` ## List with icons Use this example to create a list of items with [custom SVG icons](https://flowbite.com/icons/) instead of the default bullets. ```html ``` ## Advanced layout This example can be used to show more details for each list item such as the user's name, email and profile picture. ```html ``` ## Features list card Use this example to show a list of features inside a card component. ```html
    Standard plan
    $49 /month
    • 2 team members
    • 20GB Cloud storage
    • Integration help
    • Sketch Files
    • API Access
    • Complete documentation
    • 24×7 phone & email support
    ``` ## Horizontal list Use this example to create a horizontally aligned list of items. ```html ```