List View - Tailwind Component
This list view tailwind component is good to show something like user lists, it is use Tailwind CSS to create this beautiful list view tailwind component.
list-view
Loading component...
61 lines
<div class="flex flex-col container max-w-md mt-10 mx-auto w-full items-center justify-center bg-white dark:bg-gray-800 rounded-lg shadow">
<ul class="flex flex-col divide-y w-full">
<li class="flex flex-row">
<div class="select-none cursor-pointer hover:bg-gray-50 flex flex-1 items-center p-4">
<div class="flex flex-col w-10 h-10 justify-center items-center mr-4">
<a href="#" class="block relative">
<img alt="profil" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=150&q=80" class="mx-auto object-cover rounded-full h-10 w-10" />
</a>
</div>
<div class="flex-1 pl-1 mr-16">
<div class="font-medium dark:text-white">Jean Marc</div>
<div class="text-gray-600 dark:text-gray-200 text-sm">Developer</div>
</div>
<div class="text-gray-600 dark:text-gray-200 text-xs">6:00 AM</div>
</div>
</li>
<li class="flex flex-row">
<div class="select-none cursor-pointer hover:bg-gray-50 flex flex-1 items-center p-4">
<div class="flex flex-col w-10 h-10 justify-center items-center mr-4">
<a href="#" class="block relative">
<img alt="profil" src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGF2YXRhcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=150&q=60" class="mx-auto object-cover rounded-full h-10 w-10" />
</a>
</div>
<div class="flex-1 pl-1 mr-16">
<div class="font-medium dark:text-white">Designer</div>
<div class="text-gray-600 dark:text-gray-200 text-sm">Charlie Moi</div>
</div>
<div class="text-gray-600 dark:text-gray-200 text-xs">6:00 AM</div>
</div>
</li>
<li class="flex flex-row">
<div class="select-none cursor-pointer hover:bg-gray-50 flex flex-1 items-center p-4">
<div class="flex flex-col w-10 h-10 justify-center items-center mr-4">
<a href="#" class="block relative">
<img alt="profil" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=150&q=80" class="mx-auto object-cover rounded-full h-10 w-10" />
</a>
</div>
<div class="flex-1 pl-1 mr-16">
<div class="font-medium dark:text-white">CEO</div>
<div class="text-gray-600 dark:text-gray-200 text-sm">Marine Jeanne</div>
</div>
<div class="text-gray-600 dark:text-gray-200 text-xs">6:00 AM</div>
</div>
</li>
<li class="flex flex-row">
<div class="select-none cursor-pointer hover:bg-gray-50 flex flex-1 items-center p-4">
<div class="flex flex-col w-10 h-10 justify-center items-center mr-4">
<a href="#" class="block relative">
<img alt="profil" src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGF2YXRhcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=150&q=60" class="mx-auto object-cover rounded-full h-10 w-10" />
</a>
</div>
<div class="flex-1 pl-1 mr-16">
<div class="font-medium dark:text-white">CTO</div>
<div class="text-gray-600 dark:text-gray-200 text-sm">Boby PArk</div>
</div>
<div class="text-gray-600 dark:text-gray-200 text-xs">6:00 AM</div>
</div>
</li>
</ul>
</div>