DEV Community

Cover image for TW Elements - Lists. Free UI/UX design course
Keep Coding
Keep Coding

Posted on • Originally published at tw-elements.com

1

TW Elements - Lists. Free UI/UX design course

#webdev #tailwindcss #tutorial #beginners

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

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>
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

List position

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

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Image description

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 -->
Enter fullscreen mode Exit fullscreen mode

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

Image description

DEMO AND SOURCE CODE FOR THIS LESSON

profile
Neon
 Promoted

Hot sauce if you're wrong - web dev trivia for staff engineers

Hot sauce if you're wrong · web dev trivia for staff engineers (Chris vs Jeremy, Leet Heat S1.E4)

  • Shipping Fast: Test your knowledge of deployment strategies and techniques
  • Authentication: Prove you know your OAuth from your JWT
  • CSS: Demonstrate your styling expertise under pressure
  • Acronyms: Decode the alphabet soup of web development
  • Accessibility: Show your commitment to building for everyone

Contestants must answer rapid-fire questions across the full stack of modern web development. Get it right, earn points. Get it wrong? The spice level goes up!

Watch Video 🌶️🔥

Top comments (0)

profile
Cloudinary
 Promoted

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

If you found this post helpful, please leave a ❤️ or a friendly comment below!

Okay