Event Booking Summary Using Tailwind UI
An Event Booking Summary Card component crafted with Tailwind provides a concise and visually appealing overview of event details, making it easy for users to review and confirm their bookings
card
Loading component...
104 lines
<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>
<!-- inspired design by https://dribbble.com/shots/17084726-Event-booking-summary-component -->
<div class="flex flex-col justify-center w-full items-center text-[#090B2E] py-10 px-4">
<card
class="flex flex-col w-full p-8 mx-auto space-y-8 text-gray-900 bg-white border-2 border-gray-300 shadow-xl sm:max-w-xl rounded-2xl">
<div>
<h1 class="text-3xl font-bold">Booking summary</h1>
<div class="shadow-lg mt-6 bg-gray-300 h-0.5 rounded-full"></div>
</div>
<img class="object-cover object-center h-56 rounded-xl"
src="https://images.unsplash.com/photo-1547759499-79f5c449d257?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8aW5uc2JydWNrfGVufDB8MHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="innsbruck" />
<div class="space-y-2">
<h2 class="text-2xl font-bold">Top of Innsbruck</h2>
<p class="flex items-center text-sm text-gray-500">
<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 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
</svg>
Wehlistrasse 66, 1200, Innsbruck, Österreich
</p>
<div class="flex items-center text-sm text-gray-500">
<p class="flex items-center mr-4">
<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 mr-2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
</svg>
17 Desember 2023
</p>
<p class="flex items-center">
<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 mr-2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
starting 09:30
</p>
</div>
</div>
<div class="text-lg font-semibold text-gray-500">
<div class="flex items-center justify-between">
<span>€90.00 x 2 adult</span>
<span>
€180.00
</span>
</div>
<div class="flex items-center justify-between">
<span>€60.00 x 1 child</span>
<span>€60.00</span>
</div>
</div>
<div class="flex items-center text-sm font-medium text-gray-600">
<a href="#" class="flex items-center px-2 py-1 mr-4 border border-gray-300 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4 mr-2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
</svg>
Edit
</a>
<a href="#" class="flex items-center px-2 py-1 border border-gray-300 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4 mr-2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Remove
</a>
</div>
<hr class="my-4 bg-gray-300">
<div class="space-y-1">
<h5 class="flex items-center justify-between text-lg font-semibold text-gray-700">
<span>Subtotal</span>
<span>$320.00</span>
</h5>
<h5 class="flex items-center justify-between text-lg font-semibold text-gray-700">
<span>Voucher</span>
<span>-$120.00</span>
</h5>
<h4 class="flex items-start justify-between text-xl font-bold text-gray-900">
<span>Total</span>
<span class="flex flex-col">
$200.00
<span class="text-sm font-medium text-gray-600">incl. VAT</span>
</span>
</h4>
</div>
</card>
</div>