TW Elements - Lists. Free UI/UX design course
Tags: webdev, tailwindcss, tutorial, beginners
Published: 2024-05-13 16:00:00

## Lists
Many novice users are surprised that Tailwind's lists are not styled by default.

This means that whether we use _ol_ or _ul_, they will have no bullets or numbers by default.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qrh9ohm45qzfipyxoxml.png)

But don't worry, Tailwind CSS offers us various utility classes to customize the appearance and behavior of lists. We can leverage these classes to style lists according to their design requirements.

## Numbered list
Add .list-decimal to create a classic, ordered list with numbers:

**HTML**

```
<ol class="list-decimal">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgjw7dlwd1ki3duelx83.png)

## Bullet list
Add .list-disc to create a classic, unordered list with dots / small black circles:

**HTML**

```
<ul class="list-disc">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pk7jzw5x03sovl9gkvu.png)

## List position
There is a small problem when we want to put a list, for example, next to a paragraph:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dje7b308kp0virnz0xm3.png)

See the list bullets extend beyond the left paragraph boundary?

However, we can easily fix this by adding a .list-inside class to the list:

**HTML**

```
<p class="mb-3">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum corporis
  eos reiciendis doloribus iure aut sint eligendi rerum, delectus ipsam.
  Velit amet fugit, ut facere quam inventore dolorem esse atque.
</p>

<ul class="list-inside list-disc">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pblo31upc8iju7mb3gf.png)

## List with icons
Using what we learned about icons in [previous lessons](https://tw-elements.com/learn/te-foundations/tailwind-css/icons/), we can create lists with icons.

**List with checkmarks:**
**HTML**

```
<ul>
  <li class="mb-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="me-1 inline h-5 w-5 fill-green-700">
      <path
        fill-rule="evenodd"
        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
        clip-rule="evenodd"></path>
    </svg>
    <span>Item 1</span>
  </li>

  <li class="mb-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="me-1 inline h-5 w-5 fill-green-700">
      <path
        fill-rule="evenodd"
        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
        clip-rule="evenodd"></path>
    </svg>
    <span>Item 2</span>
  </li>

  <li class="mb-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="me-1 inline h-5 w-5 fill-green-700">
      <path
        fill-rule="evenodd"
        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
        clip-rule="evenodd"></path>
    </svg>
    <span>Item 3</span>
  </li>
</ul>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvcv0s36tye3edzstmo5.png)

**List with arrows:**
**HTML**

```
<ul class="mb-10">
  <li class="mb-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="me-1 inline h-5 w-5 fill-primary-700">
      <path
        fill-rule="evenodd"
        d="M16.72 7.72a.75.75 0 011.06 0l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 11-1.06-1.06l2.47-2.47H3a.75.75 0 010-1.5h16.19l-2.47-2.47a.75.75 0 010-1.06z"
        clip-rule="evenodd"></path>
    </svg>
    <span>Item 1</span>
  </li>

  <li class="mb-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="me-1 inline h-5 w-5 fill-primary-700">
      <path
        fill-rule="evenodd"
        d="M16.72 7.72a.75.75 0 011.06 0l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 11-1.06-1.06l2.47-2.47H3a.75.75 0 010-1.5h16.19l-2.47-2.47a.75.75 0 010-1.06z"
        clip-rule="evenodd"></path>
    </svg>
    <span>Item 2</span>
  </li>

  <li class="mb-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="me-1 inline h-5 w-5 fill-primary-700">
      <path
        fill-rule="evenodd"
        d="M16.72 7.72a.75.75 0 011.06 0l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 11-1.06-1.06l2.47-2.47H3a.75.75 0 010-1.5h16.19l-2.47-2.47a.75.75 0 010-1.06z"
        clip-rule="evenodd"></path>
    </svg>
    <span>Item 3</span>
  </li>
</ul>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkqt9mdphg67e5wx4l0y.png)

**List with question marks:**
**HTML**

```
<ul class="mb-10">
  <li class="mb-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="me-1 inline h-5 w-5 fill-orange-500">
      <path
        fill-rule="evenodd"
        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z"
        clip-rule="evenodd"></path>
    </svg>
    <span>Item 1</span>
  </li>

  <li class="mb-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="me-1 inline h-5 w-5 fill-orange-500">
      <path
        fill-rule="evenodd"
        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z"
        clip-rule="evenodd"></path>
    </svg>
    <span>Item 2</span>
  </li>

  <li class="mb-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="me-1 inline h-5 w-5 fill-orange-500">
      <path
        fill-rule="evenodd"
        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z"
        clip-rule="evenodd"></path>
    </svg>
    <span>Item 3</span>
  </li>
</ul>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ishubxnrxpjp3ngn5tf.png)

## Step 1 - add list with icons to the project
Now let's use the knowledge from this lesson and complete our "Details" section. Next to the carousel, we will insert a list with icons and text with a header.

**HTML**

```
<!-- Text -->
<div class="flex items-center">
  <div class="text-gray-700 dark:text-white">
    <h3 class="mb-4 text-3xl font-semibold">Details</h3>

    <p class="mb-7">
      This beginner-friendly, example-based course will guide you through
      the essential knowledge of TW Elements ecosystem.
    </p>

    <p class="mb-4 font-semibold">What will you learn:</p>

    <ul class="">
      <li class="mb-2 flex">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="me-1 h-6 w-6 text-green-800">
          <path
            fill-rule="evenodd"
            d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
            clip-rule="evenodd" />
        </svg>

        <span>Tailwind</span>
      </li>

      <li class="mb-2 flex">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="me-1 h-6 w-6 text-green-800">
          <path
            fill-rule="evenodd"
            d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
            clip-rule="evenodd" />
        </svg>

        <span>TW Elements</span>
      </li>

      <li class="mb-2 flex">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="me-1 h-6 w-6 text-green-800">
          <path
            fill-rule="evenodd"
            d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
            clip-rule="evenodd" />
        </svg>

        <span>UI/UX design</span>
      </li>

      <li class="mb-2 flex">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="me-1 h-6 w-6 text-green-800">
          <path
            fill-rule="evenodd"
            d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
            clip-rule="evenodd" />
        </svg>

        <span>Responsive web design</span>
      </li>
    </ul>
  </div>
</div>
<!-- Text -->
```

After saving the file and refreshing the browser you should see content like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hew2lcqg32jtzdmjeb0x.png)

**[DEMO AND SOURCE CODE FOR THIS LESSON](https://tw-elements.com/snippets/tailwind/ascensus/5423431)**