Todo list template

This tailwind example is contributed by Steven Kuhn, on 19-Nov-2022. Component is made with Tailwind v3.4.

Tailwind v3.4 19.5k 10

<div class="p-4 bg-orange-50 border rounded-lg border-red-700">
    <div class="font-normal mb-2">
        <p class="text-2xl mb-0.5">30%</p>
        <p class="text-xs">Profile Completion</p>
    </div>
    <div class="mb-4">
        <div class="h-1 bg-red-200 w-full rounded">
            <div style="width: 30%;" class="h-full transition-all duration-1000 rounded bg-red-600"></div>
        </div>
    </div>
    <div class="mb-2">
        <a href="#">
            <div class="flex cursor-pointer text-md">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="16"
                    height="16" viewBox="0 0 24 24" stroke-width="2" stroke="#fff" fill="none" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <circle cx="12" cy="12" r="9" fill="#00AA45"></circle>
                    <path d="M9 12l2 2l4 -4"></path>
                </svg>
                <p class="ml-1 line-through">Basic Profile (15%)</p>
            </div>
        </a>
    </div>
    <div class="mb-2">
        <a href="#">
            <div class="flex cursor-pointer text-md">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="16"
                    height="16" viewBox="0 0 24 24" stroke-width="2" stroke="#fff" fill="none" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <circle cx="12" cy="12" r="9" fill="#00AA45"></circle>
                    <path d="M9 12l2 2l4 -4"></path>
                </svg>
                <p class="ml-1 line-through">Profile Picture (5%)</p>
            </div>
        </a>
    </div>
    <div class="mb-2">
        <a href="#">
            <div class="flex cursor-pointer text-md">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="16"
                    height="16" viewBox="0 0 24 24" stroke-width="2" stroke="#212121" fill="none" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <circle cx="12" cy="12" r="9" fill="#fff"></circle>
                    <path d="M9 12l2 2l4 -4"></path>
                </svg>
                <p class="ml-1 hover:underline">Add Location (5%)</p>
            </div>
        </a>
    </div>
    <div class="mb-2">
        <a href="#">
            <div class="flex cursor-pointer text-md">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="16"
                    height="16" viewBox="0 0 24 24" stroke-width="2" stroke="#fff" fill="none" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <circle cx="12" cy="12" r="9" fill="#00AA45"></circle>
                    <path d="M9 12l2 2l4 -4"></path>
                </svg>
                <p class="ml-1 line-through">Add Profile Tags (10%)</p>
            </div>
        </a>
    </div>
    <div class="mb-2">
        <a href="#">
            <div class="flex cursor-pointer text-md">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="16"
                    height="16" viewBox="0 0 24 24" stroke-width="2" stroke="#212121" fill="none" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <circle cx="12" cy="12" r="9" fill="#fff"></circle>
                    <path d="M9 12l2 2l4 -4"></path>
                </svg>
                <p class="ml-1 hover:underline">Add Social Links (5%)</p>
            </div>
        </a>
    </div>
    <div class="mb-2">
        <a href="/user">
            <div class="flex cursor-pointer text-md">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="16"
                    height="16" viewBox="0 0 24 24" stroke-width="2" stroke="#212121" fill="none" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <circle cx="12" cy="12" r="9" fill="#fff"></circle>
                    <path d="M9 12l2 2l4 -4"></path>
                </svg>
                <p class="ml-1 hover:underline">Add Portfolio (30%)</p>
            </div>
        </a>
    </div>
    <div class="mb-2" role="none">
        <div class="flex cursor-pointer text-md">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="16"
                height="16" viewBox="0 0 24 24" stroke-width="2" stroke="#212121" fill="none" stroke-linecap="round"
                stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <circle cx="12" cy="12" r="9" fill="#fff"></circle>
                <path d="M9 12l2 2l4 -4"></path>
            </svg>
            <p class="ml-1 hover:underline">Add Experience (20%)</p>
        </div>
    </div>
    <div class="mb-2" role="none">
        <div class="flex cursor-pointer text-md">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="16"
                height="16" viewBox="0 0 24 24" stroke-width="2" stroke="#212121" fill="none" stroke-linecap="round"
                stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <circle cx="12" cy="12" r="9" fill="#fff"></circle>
                <path d="M9 12l2 2l4 -4"></path>
            </svg>
            <p class="ml-1 hover:underline">Add Education (10%)</p>
        </div>
    </div>
    <div role="none">
        <div class="flex cursor-pointer text-md">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="16"
                height="16" viewBox="0 0 24 24" stroke-width="2" stroke="#212121" fill="none" stroke-linecap="round"
                stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <circle cx="12" cy="12" r="9" fill="#fff"></circle>
                <path d="M9 12l2 2l4 -4"></path>
            </svg>
            <p class="ml-1 hover:underline">Choose Username</p>
        </div>
    </div>
</div>

Related Examples

Todo list in tailwlind

Kofi Osei

3 years ago

18.1k
Stacked list

Odessa Young

3 years ago

19.9k
Responsive list

Sienna

3 years ago

12.8k
Responsive list with 3 columns

TailwindFlex

3 years ago

14.3k
Basic list

Leon Bachmann

3 years ago

10.6k
Features list

Leon Bachmann

3 years ago

11.4k
List example

Isabella Kowalski

3 years ago

14.9k
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Prajwal Hallale

3 years ago

20.5k
Users ranking list with points

Leif99

3 years ago

12.9k
Nested list
A nested list is suitable for a table of contents / navigational list

Noob

4 years ago

21.7k
Feature list
list section

Gopi Yadav

3 years ago

11.2k
Logo cloud

Alok

3 years ago

10.9k
Nested list section
List with soft background colors. List with Hierarchy

Orion.c

3 years ago

12.4k