Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

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.

Ordered list

One
Two
Three

Unordered list

One
Two
Three

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>

One
Two
Three

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>

One
Two
Three

List position

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

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.

One
Two
Three

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>

One
Two
Three

List with icons

Using what we learned about icons in previous lessons, 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>

Item 1
Item 2
Item 3

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>

Item 1
Item 2
Item 3

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>

Item 1
Item 2
Item 3

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:

Details

This beginner-friendly, example-based course will guide you through the essential knowledge of TW Elements ecosystem.

What will you learn:

Tailwind
TW Elements
UI/UX design
Responsive web design

Demo and source code for this lesson

Ask question

Prev Next

About author

Michal Szymanski

@ascensus_mdb

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.

Basics

Tailwind CSS

TW Elements

MDB GO

Create a Blog

Create an eCommerce

Create an Admin Dashboard