<div class="max-w-screen-sm bg-white dark:bg-gray-800 shadow-sm rounded-lg p-4 border border-gray-200 dark:border-gray-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-gray-800/50 transition-all duration-200">
    <h3 class="mb-3 text-sm font-medium text-gray-900 dark:text-gray-100">Task List</h3>
    
    <ul class="space-y-2">
      <li class="flex flex-col gap-2 rounded-lg border p-3 transition-all hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-slate-700">
        <div class="flex items-center">
          <span class="font-medium text-gray-900 dark:text-gray-100">Finish UI Design</span>
          <span class="ml-auto text-xs text-gray-500 dark:text-gray-400">Due in 2 days</span>
        </div>
        <div class="flex items-center gap-2">
          <span class="inline-flex items-center rounded-md bg-blue-600 px-2.5 py-0.5 text-xs font-medium text-white">In Progress</span>
          <span class="inline-flex items-center rounded-md bg-gray-200 px-2.5 py-0.5 text-xs font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-300">Design</span>
        </div>
      </li>
  
      <li class="flex flex-col gap-2 rounded-lg border p-3 transition-all hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-slate-700">
        <div class="flex items-center">
          <span class="font-medium text-gray-900 dark:text-gray-100">Backend API Setup</span>
          <span class="ml-auto text-xs text-gray-500 dark:text-gray-400">Due in 5 days</span>
        </div>
        <div class="flex items-center gap-2">
          <span class="inline-flex items-center rounded-md bg-green-600 px-2.5 py-0.5 text-xs font-medium text-white">Completed</span>
          <span class="inline-flex items-center rounded-md bg-gray-200 px-2.5 py-0.5 text-xs font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-300">Backend</span>
        </div>
      </li>
  
      <li class="flex flex-col gap-2 rounded-lg border p-3 transition-all hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-slate-700">
        <div class="flex items-center">
          <span class="font-medium text-gray-900 dark:text-gray-100">Deploy to Production</span>
          <span class="ml-auto text-xs text-gray-500 dark:text-gray-400">Due tomorrow</span>
        </div>
        <div class="flex items-center gap-2">
          <span class="inline-flex items-center rounded-md bg-yellow-600 px-2.5 py-0.5 text-xs font-medium text-white">Pending</span>
          <span class="inline-flex items-center rounded-md bg-gray-200 px-2.5 py-0.5 text-xs font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-300">DevOps</span>
        </div>
      </li>
    </ul>
</div>
  

openui

Build Stunning Interfaces Faster

Task List