Lists

<ul class="list-disc list-inside">
    <li class="mb-1 text-slate-700 dark:text-slate-400">Cras justo odio</li>
    <li class="mb-1 text-slate-700 dark:text-slate-400">Dapibus ac facilisis in</li>
    <li class="mb-1 text-slate-700 dark:text-slate-400">Morbi leo risus</li>
    <li class="cursor-not-allowed text-slate-400 dark:text-slate-500">Disabled</li>
</ul>

<ol class="list-none">
    <li class="mb-1 text-slate-700 dark:text-slate-400">Cras justo odio</li>
    <li class="mb-1 text-slate-700 dark:text-slate-400">Dapibus ac facilisis in</li>
    <li class="mb-1 text-slate-700 dark:text-slate-400">Morbi leo risus</li>
    <li class="cursor-not-allowed text-slate-400 dark:text-slate-500">Disabled</li>
</ol>

                                       
<ol class="list-decimal list-inside">
    <li class="mb-1 text-slate-700 dark:text-slate-400">Cras justo odio</li>
    <li class="mb-1 text-slate-700 dark:text-slate-400">Dapibus ac facilisis in</li>
    <li class="mb-1 text-slate-700 dark:text-slate-400">Morbi leo risus</li>
    <li class="cursor-not-allowed text-slate-400 dark:text-slate-500">Disabled</li>
</ol>

<ol class="list-none list-inside">
    <li class="mb-1 text-slate-700 dark:text-slate-400"><i class="fas fa-check text-primary-500"></i> Cras justo odio</li>
    <li class="mb-1 text-slate-700 dark:text-slate-400"><i class="fas fa-check text-primary-500"></i> Dapibus ac facilisis in</li>
    <li class="mb-1 text-slate-700 dark:text-slate-400"><i class="fas fa-check text-primary-500"></i> Morbi leo risus</li>
    <li class="cursor-not-allowed text-slate-400 dark:text-slate-500"><i class="fas fa-check text-primary-100"></i> Disabled</li>
</ol>

<ol class="list-none list-inside border border-slate-200 dark:border-slate-700 rounded ">
    <li class="p-2 text-slate-700 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700 active active:bg-primary-500 active:text-white"><i class="fas fa-angles-right text-primary-500 active:text-white"></i> <a href="#">Cras justo odio</a></li>
    <li class="p-2 text-slate-700 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700 active:bg-primary-500 active:text-white"><i class="fas fa-angles-right text-primary-500 active:text-white"></i> <a href="#">Dapibus ac facilisis in</a></li>
    <li class="p-2 text-slate-700 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700 active:bg-primary-500 active:text-white"><i class="fas fa-angles-right text-primary-500 active:text-white"></i> <a href="#">Morbi leo risus</a></li>
    <li class="cursor-not-allowed text-slate-400 dark:text-slate-500 p-2"><i class="fas fa-angles-right text-primary-100"></i> Disabled</li>
</ol>

<ol class="list-none list-inside border border-slate-200 dark:border-slate-700 rounded">
    <li class="p-2 text-slate-700 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700 justify-between flex">
        <div><i class="fas fa-angles-right text-primary-500"></i> Cras justo odio</div>
        <span class="focus:outline-none text-[11px] bg-yellow-500/10 text-yellow-500 dark:text-yellow-600 rounded font-medium py-[2px] px-2">Designer</span>
    </li>
    <li class="p-2 text-slate-700 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700 justify-between flex">
        <div><i class="fas fa-angles-right text-primary-500"></i> Dapibus ac facilisis in</div>
        <span class="focus:outline-none text-[11px] bg-primary-500/10 text-primary-500 dark:text-primary-600 rounded font-medium py-[2px] px-2">Designer</span>
    </li>
    <li class="p-2 text-slate-700 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700 justify-between flex">
        <div><i class="fas fa-angles-right text-primary-500"></i> Morbi leo risus</div>
        <span class="focus:outline-none text-[11px] bg-green-500/10 text-green-500 dark:text-green-600 rounded font-medium py-[2px] px-2">Designer</span>
    </li>
    <li class="cursor-not-allowed text-slate-400 p-2"><i class="fas fa-angles-right text-primary-100"></i> Disabled</li>
</ol>