Home
Steven Kuhn
Todo list template

Todo list template

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

List

16.7k

<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