events-list-grid-using-tailwind-ui Using Tailwind UI
An events list grid created with Tailwind provides an organized and visually appealing way to display upcoming events, making it easy for users to find and engage with event details. Inspired design by Ildiko Gaspar from dribbble.
grid
Loading component...
149 lines
<!-- Inspired design by Ildiko Gaspar from dribbble https://dribbble.com/shots/15591092-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-[#EAECF9] px-4 py-4 max-w-5xl mx-auto h-full w-full">
<div class="grid gap-4 p-3 md:grid-cols-2 lg:grid-cols-3 md:p-4 xl:p-5">
<div class="bg-[#544BAB] text-white border rounded-lg shadow-md p-8 space-y-8">
<div class="">
<p class="mb-2 text-sm">MAY</p>
<p class="text-4xl font-bold">4</p>
</div>
<div>
<p class="font-semibold break-all">Computer Hardware Desktops And Notebooks
And Handhealds Oh My</p>
</div>
<div class="flex items-center justify-between">
<div class="text-sm">
<p>15:00 - 17:00</p>
<p>Online</p>
</div>
<div class="flex items-center mt-2.5 cursor-pointer group">
<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 fill-current group-hover:text-gray-200">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</div>
</div>
</div>
<div class="bg-white text-[#544BAB] border rounded-lg shadow-md p-8 space-y-8">
<div class="">
<p class="mb-2 text-sm">MAY</p>
<p class="text-4xl font-bold">2</p>
</div>
<div>
<p class="font-semibold break-all">Compatible Inkjet Cartridge</p>
</div>
<div class="flex items-center justify-between">
<div class="text-sm">
<p>12:00 - 14:00</p>
<p>Online</p>
</div>
<div class="flex items-center mt-2.5 cursor-pointer group">
<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 fill-current group-hover:text-purple-900">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</div>
</div>
</div>
<div class="bg-[#544BAB] text-white border rounded-lg shadow-md p-8 space-y-8">
<div class="">
<p class="mb-2 text-sm">MAY</p>
<p class="text-4xl font-bold">8</p>
</div>
<div>
<p class="font-semibold break-all">Choosing The Best Audio Player Software For Your Computer</p>
</div>
<div class="flex items-center justify-between">
<div class="text-sm">
<p>14:00 - 15:00</p>
<p>Online</p>
</div>
<div class="flex items-center mt-2.5 cursor-pointer group">
<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 fill-current group-hover:text-gray-200">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</div>
</div>
</div>
<div class="bg-white text-[#544BAB] border rounded-lg shadow-md p-8 space-y-8">
<div class="">
<p class="mb-2 text-sm">MAY</p>
<p class="text-4xl font-bold">11</p>
</div>
<div>
<p class="font-semibold break-all">Microsoft Patch Management For Home Users</p>
</div>
<div class="flex items-center justify-between">
<div class="text-sm">
<p>09:00 - 10:00</p>
<p>Online</p>
</div>
<div class="flex items-center mt-2.5 cursor-pointer group">
<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 fill-current group-hover:text-purple-900">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</div>
</div>
</div>
<div class="bg-[#544BAB] text-white border rounded-lg shadow-md p-8 space-y-8">
<div class="">
<p class="mb-2 text-sm">MAY</p>
<p class="text-4xl font-bold">14 - 16</p>
</div>
<div>
<p class="font-semibold break-all">Help Finding Information Online</p>
</div>
<div class="flex items-center justify-between">
<div class="text-sm">
<p>11:00 - 13:00</p>
<p>Online</p>
</div>
<div class="flex items-center mt-2.5 cursor-pointer group">
<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 fill-current group-hover:text-gray-200">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</div>
</div>
</div>
<div class="bg-white text-[#544BAB] border rounded-lg shadow-md p-8 space-y-8">
<div class="">
<p class="mb-2 text-sm">MAY</p>
<p class="text-4xl font-bold">18 - 20</p>
</div>
<div>
<p class="font-semibold break-all">Steps In Installing Rack Mount LCD Monitors</p>
</div>
<div class="flex items-center justify-between">
<div class="text-sm">
<p>13:00 - 14:00</p>
<p>Online</p>
</div>
<div class="flex items-center mt-2.5 cursor-pointer group">
<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 fill-current group-hover:text-purple-900">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</div>
</div>
</div>
</div>
<button
class="block w-full uppercase bg-[#37335D] font-semibold text-xl text-white py-5 rounded-xl hover:bg-purple-900">
load more events
</button>
</section>