Galerie d’images sépia minimaliste pour les réservations
Un composant de galerie d’images au design minimaliste et plat avec des tons chauds sépia/brun, adapté aux systèmes de réservation et de réservation. Il dispose d’un design réactif et d’une prise en charge du mode sombre.
HTML Code
<div class="bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-extrabold text-center mb-4 sm:mb-6 leading-tight">
Our Spaces
</h2>
<p class="text-center text-lg text-stone-600 dark:text-stone-400 mb-8 sm:mb-12 max-w-2xl mx-auto">
Explore our elegantly designed spaces, perfect for your next reservation.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Gallery Item 1 -->
<div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
<img src="https://picsum.photos/id/404/600/400" alt="Spacious Lounge Area" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
<div class="p-4 bg-stone-100 dark:bg-stone-800">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Heritage Room</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-4">Ideal for intimate gatherings and private consultations.</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
View Details
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
<img src="https://picsum.photos/id/292/600/400" alt="Modern Meeting Room" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
<div class="p-4 bg-stone-100 dark:bg-stone-800">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Loft Studio</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-4">A bright, airy space ideal for creative workshops.</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
View Details
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
<img src="https://picsum.photos/id/312/600/400" alt="Cozy Corner Cafe" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
<div class="p-4 bg-stone-100 dark:bg-stone-800">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Quiet Nook</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-4">Perfect for focused work or small, confidential meetings.</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
View Details
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
<img src="https://picsum.photos/id/296/600/400" alt="Elegant Dining Area" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
<div class="p-4 bg-stone-100 dark:bg-stone-800">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Grand Salon</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-4">A versatile space for larger functions and events.</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
View Details
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
<img src="https://picsum.photos/id/300/600/400" alt="Spacious Office Setup" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
<div class="p-4 bg-stone-100 dark:bg-stone-800">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Executive Suite</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-4">A premium setting for corporate meetings and presentations.</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
View Details
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
<img src="https://picsum.photos/id/350/600/400" alt="Outdoor Patio Area" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
<div class="p-4 bg-stone-100 dark:bg-stone-800">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Garden Terrace</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-4">An inviting outdoor setting for relaxed gatherings.</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
View Details
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Galerie
Un composant de galerie réactif avec un style de conception 3D, avec de la profondeur et de l’engagement grâce à des effets d’ombre et de survol. Il prend en charge les thèmes sombres et clairs.
Composant Galerie
Composant de galerie réactif conçu dans Material Design avec une palette de couleurs analogue à l’aide d’un tableau de bord.
Composant Galerie
Un composant de galerie réactif avec un effet de glassmorphism, des couleurs vives et une prise en charge du thème sombre, adapté à un tableau de bord.