Task Card

<div class="search">
    <div class="search__icon">
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.25 11.25L8.21859 8.21859M8.21859 8.21859C9.01031 7.42687 9.5 6.33312 9.5 5.125C9.5 2.70875 7.54125 0.75 5.125 0.75C2.70875 0.75 0.75 2.70875 0.75 5.125C0.75 7.54125 2.70875 9.5 5.125 9.5C6.33312 9.5 7.42687 9.01031 8.21859 8.21859Z" stroke="#94A3B8" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </div>
    <input type="search" class="search__input placeholder:pl-3" placeholder="Search" required>
</div>
<div class="border p-smSpace mt-1 rounded-md bg-error-500 text-white">
    <div class="text-sm space-y-smSpace p-xsSpace">
        <ul role="list">
            <li class="flex font-semibold pb-2xsSpace"><span class="mr-2"><svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7 5V7.5M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7ZM7 9.5H7.005V9.505H7V9.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </span> Driver
                Cancelled -
                12:00pm
            </li>
            <li class="flex pb-2xsSpace"><span class="mr-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
                    </svg>
                </span> Mayona Road Siteworks</li>

            <li class="flex pb-2xsSpace">
                <div class="flex h-8 w-8 items-center justify-center rounded-full ring-1 ring-neutral-100">
                    <span class="justify-center font-semibold tracking-widest">EP</span>
                </div>
                <div class="flex h-8 w-8 items-center justify-center rounded-full ring-1 ring-neutral-100">
                    <span class="justify-center font-semibold tracking-widest">EP</span>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="border p-smSpace mt-1 rounded-md bg-error-100 text-red-600">
    <div class="text-sm space-y-smSpace p-xsSpace">
        <ul role="list">
            <li class="flex font-semibold pb-2xsSpace">
                <span class="mr-2"><svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7 5V7.5M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7ZM7 9.5H7.005V9.505H7V9.5Z" stroke="#DC2626" stroke-linecap="round" stroke-linejoin="round" />
                    </svg></span> Driver Cancelled - 12:00pm
            </li>
            <li class="flex pb-2xsSpace">
                <span class="mr-2">
                    <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 3V13C1 14.1046 1.89543 15 3 15H17C18.1046 15 19 14.1046 19 13V5C19 3.89543 18.1046 3 17 3H11L9 1H3C1.89543 1 1 1.89543 1 3Z" stroke="#DC2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg></span> Mayona
                Road Siteworks
            </li>
            <li class="flex pb-2xsSpace">
                <div class="flex h-8 w-8 items-center justify-center rounded-full ring-1 ring-tertiary-600">
                    <span class="justify-center font-semibold text-tertiary-600 tracking-widest">EP</span>
                </div>
                <div class="flex h-8 w-8 items-center justify-center rounded-full ring-1 ring-tertiary-600">
                    <span class="justify-center font-semibold text-tertiary-600 tracking-widest">EP</span>
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="border p-smSpace mt-1 rounded-md bg-warning-100 text-warning-500">
    <div class="text-sm space-y-smSpace p-xsSpace">
        <ul role="list">
            <li class="flex font-semibold pb-2xsSpace">
                <span class="mr-2"><svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7 5V7.5M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7ZM7 9.5H7.005V9.505H7V9.5Z" stroke="#D97706" stroke-linecap="round" stroke-linejoin="round" />
                    </svg></span> Driver Cancelled - 12:00pm
            </li>
            <li class="flex pb-2xsSpace">
                <span class="mr-2">
                    <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 3V13C1 14.1046 1.89543 15 3 15H17C18.1046 15 19 14.1046 19 13V5C19 3.89543 18.1046 3 17 3H11L9 1H3C1.89543 1 1 1.89543 1 3Z" stroke="#D97706" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg></span> Mayona
                Road Siteworks
            </li>
            <li class="flex pb-2xsSpace">
                <div class="flex h-8 w-8 items-center justify-center rounded-full ring-1 ring-inset">
                    <span class="justify-center font-semibold tracking-widest">EP</span>
                </div>
                <div class="flex h-8 w-8 items-center justify-center rounded-full ring-1 ring-inset">
                    <span class="justify-center font-semibold tracking-widest">EP</span>
                </div>
            </li>
        </ul>
    </div>
</div>