elreco
<body class="bg-[#304529] font-sans leading-normal tracking-normal">
<div class="flex items-center justify-center h-screen">
<div class="bg-white bg-opacity-90 shadow-lg rounded-lg p-8 max-w-md w-full">
<h1 class="text-2xl font-bold mb-6 text-center">Available Dates</h1>
<div class="space-y-4">
<div>
<h2 class="text-xl font-semibold mb-2">This Week</h2>
<ul class="space-y-2">
<li class="flex justify-between items-center">
<span>Thursday, 05.10.2023</span>
<a href="#" class="text-blue-500 hover:underline flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</a>
</li>
<li class="flex justify-between items-center">
<span>Friday, 06.10.2023</span>
<a href="#" class="text-blue-500 hover:underline flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</a>
</li>
<li class="flex justify-between items-center line-through text-gray-500">
<span>Saturday, 07.10.2023</span>
<span class="text-gray-500 flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</span>
</li>
<li class="flex justify-between items-center">
<span>Sunday, 08.10.2023</span>
<a href="#" class="text-blue-500 hover:underline flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</a>
</li>
</ul>
</div>
<div>
<h2 class="text-xl font-semibold mb-2">Next Week</h2>
<ul class="space-y-2">
<li class="flex justify-between items-center">
<span>Thursday, 12.10.2023</span>
<a href="#" class="text-blue-500 hover:underline flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</a>
</li>
<li class="flex justify-between items-center">
<span>Friday, 13.10.2023</span>
<a href="#" class="text-blue-500 hover:underline flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</a>
</li>
<li class="flex justify-between items-center line-through text-gray-500">
<span>Saturday, 14.10.2023</span>
<span class="text-gray-500 flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</span>
</li>
<li class="flex justify-between items-center">
<span>Sunday, 15.10.2023</span>
<a href="#" class="text-blue-500 hover:underline flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</a>
</li>
</ul>
</div>
<div>
<h2 class="text-xl font-semibold mb-2">Week After Next</h2>
<ul class="space-y-2">
<li class="flex justify-between items-center">
<span>Thursday, 19.10.2023</span>
<a href="#" class="text-blue-500 hover:underline flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</a>
</li>
<li class="flex justify-between items-center">
<span>Friday, 20.10.2023</span>
<a href="#" class="text-blue-500 hover:underline flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</a>
</li>
<li class="flex justify-between items-center line-through text-gray-500">
<span>Saturday, 21.10.2023</span>
<span class="text-gray-500 flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</span>
</li>
<li class="flex justify-between items-center">
<span>Sunday, 22.10.2023</span>
<a href="#" class="text-blue-500 hover:underline flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</a>
</li>
</ul>
</div>
<div>
<h2 class="text-xl font-semibold mb-2">In Three Weeks</h2>
<ul class="space-y-2">
<li class="flex justify-between items-center">
<span>Thursday, 26.10.2023</span>
<a href="#" class="text-blue-500 hover:underline flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</a>
</li>
<li class="flex justify-between items-center">
<span>Friday, 27.10.2023</span>
<a href="#" class="text-blue-500 hover:underline flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</a>
</li>
<li class="flex justify-between items-center line-through text-gray-500">
<span>Saturday, 28.10.2023</span>
<span class="text-gray-500 flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</span>
</li>
<li class="flex justify-between items-center">
<span>Sunday, 29.10.2023</span>
<a href="#" class="text-blue-500 hover:underline flex items-center">
Reservation <i class="iconoir-arrow-right ml-1"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>