Events List Using Tailwind UI
An events list crafted with Tailwind offers an organized and stylish presentation of upcoming events, facilitating easy discovery and engagement for users. Inspired design by Ildiko Gaspar from dribbble.
list-view
Loading component...
132 lines
<!-- Inspired design by Ildiko Gaspar from dribbble https://dribbble.com/shots/16742982-Events-List-UI-Design -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<section class="bg-[#ECEFF8] py-4 h-screen w-screen">
<div class="container flex flex-col items-center w-full max-w-3xl px-8 mx-auto sm:px-0">
<h2 class="mb-4 text-2xl font-semibold text-start">Events List</h2>
<ul class="flex flex-col w-full space-y-4">
<li class="p-4 bg-white rounded-lg">
<div class="flex items-center flex-1 mb-4 select-none sm:mb-0">
<div class="bg-[#ECEFF8] rounded-xl p-4 text-center mr-4">
<p class="text-xs font-medium">Today</p>
<p class="text-2xl font-semibold">17:00</p>
</div>
<div class="flex-1 hidden sm:block">
<h1 class="mb-2 font-semibold"> Burgen International Film Festival </h1>
<p class="text-sm">Films from all over the world gather all film enthusiasts for unique moments
at
the Bergen International Film Festival</p>
</div>
<div class="flex flex-row justify-center items-center hover:bg-gray-900 rounded-xl px-4 py-2.5 group">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5 mr-1 stroke-current group-hover:stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
<p class="text-xs font-medium text-gray-800 group-hover:text-white"> Add to calender</p>
</div>
</div>
<div class="flex-1 pl-1 sm:hidden">
<h1 class="mb-2 font-semibold"> Burgen International Film Festival </h1>
<p class="text-sm">Films from all over the world gather all film enthusiasts for unique moments
at
the Bergen International Film Festival</p>
</div>
</li>
<li class="p-4 bg-white rounded-lg">
<div class="flex items-center flex-1 mb-4 select-none sm:mb-0">
<div class="bg-[#F8ECF8] rounded-xl p-4 text-center mr-4">
<p class="text-xs font-medium">22 - 31 OCT</p>
<p class="text-2xl font-semibold">10:00</p>
</div>
<div class="flex-1 hidden sm:block">
<h1 class="mb-2 font-semibold"> Wool Week </h1>
<p class="text-sm">ULLVEKA 2021 will be held for the eight time in the periodd 22-31 October
2021, and will take place in the entire Bergen region.</p>
</div>
<div class="flex flex-row justify-center items-center bg-gray-900 rounded-xl px-4 py-2.5">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5 mr-1 stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
<p class="text-xs font-medium text-white"> Add to calender</p>
</div>
</div>
<div class="flex-1 pl-1 sm:hidden">
<h1 class="mb-2 font-semibold"> Wool Week </h1>
<p class="text-sm">ULLVEKA 2021 will be held for the eight time in the periodd 22-31 October 2021,
and will take place in the entire Bergen region.</p>
</div>
</li>
<li class="p-4 bg-white rounded-lg">
<div class="flex items-center flex-1 mb-4 select-none sm:mb-0">
<div class="bg-[#F8ECF8] rounded-xl p-4 text-center mr-4">
<p class="text-xs font-medium">22 - 31 OCT</p>
<p class="text-2xl font-semibold">19:00</p>
</div>
<div class="flex-1 hidden sm:block">
<h1 class="mb-2 font-semibold">Light park at Bergenhus Fortress</h1>
<p class="text-sm">LUMAGICA - a magical experience for young and old at Bergenhus Fortress, 12
November to 19 December 2021.</p>
</div>
<div class="flex flex-row justify-center items-center hover:bg-gray-900 rounded-xl px-4 py-2.5 group">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5 mr-1 stroke-current group-hover:stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
<p class="text-xs font-medium text-gray-800 group-hover:text-white"> Add to calender</p>
</div>
</div>
<div class="flex-1 pl-1 sm:hidden">
<h1 class="mb-2 font-semibold">Light park at Bergenhus Fortress</h1>
<p class="text-sm">LUMAGICA - a magical experience for young and old at Bergenhus Fortress, 12
November to 19 December 2021.</p>
</div>
</li>
<li class="p-4 bg-white rounded-lg">
<div class="flex items-center flex-1 mb-4 select-none sm:mb-0">
<div class="bg-[#ECEFF8] rounded-xl p-4 text-center mr-4">
<p class="text-xs font-medium">13 31 DEC</p>
<p class="text-2xl font-semibold">10:00</p>
</div>
<div class="flex-1 hidden sm:block">
<h1 class="mb-2 font-semibold">Gingerbread City 2021</h1>
<p class="text-sm">The world's ;argest Gingebread can be found in the Xhibition shopping center,
right in the center of Bergen.</p>
</div>
<div class="flex flex-row justify-center items-center hover:bg-gray-900 rounded-xl px-4 py-2.5 group">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5 mr-1 stroke-current group-hover:stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
<p class="text-xs font-medium text-gray-800 group-hover:text-white"> Add to calender</p>
</div>
</div>
<div class="flex-1 pl-1 sm:hidden">
<h1 class="mb-2 font-semibold">Gingerbread City 2021</h1>
<p class="text-sm">The world's ;argest Gingebread can be found in the Xhibition shopping center,
right in the center of Bergen.</p>
</div>
</li>
</ul>
</div>
</section>