Brutalisme Booking Media Composante
Un composant multimédia simple, de style brutaliste, pour les systèmes de réservation, avec un contraste élevé et une palette de couleurs complémentaire, entièrement réactif avec prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
<div class="w-full max-w-md bg-white dark:bg-gray-800 border-4 border-black dark:border-red-500 shadow-[8px_8px_0_0_#EF4444] dark:shadow-[8px_8px_0_0_#1E3A8A] transition-all duration-300 ease-in-out">
<div class="relative overflow-hidden bg-red-500 dark:bg-red-700 h-48 sm:h-56 lg:h-64 border-b-4 border-black dark:border-red-500">
<img src="https://picsum.photos/600/400?random=1" alt="Booking slot preview" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-filter duration-300">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4">
<h3 class="text-2xl sm:text-3xl font-extrabold text-yellow-300 dark:text-yellow-200 uppercase leading-none break-words">
Book Your
<span class="block">Next Slot</span>
</h3>
</div>
</div>
<div class="p-4 sm:p-6 border-b-4 border-black dark:border-red-500">
<p class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 uppercase mb-2">
Available now!
</p>
<p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 font-medium leading-tight">
Secure your spot for an exclusive consultation. Limited availability each week.
</p>
</div>
<div class="p-4 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Facilitator's avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-4 border-black dark:border-yellow-400 object-cover grayscale hover:grayscale-0 transition-filter duration-300">
<div class="text-gray-900 dark:text-gray-100">
<p class="font-extrabold text-base sm:text-lg uppercase leading-none">Jane Doe</p>
<p class="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-400">Senior Consultant</p>
</div>
</div>
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border-4 border-black dark:border-blue-700 bg-yellow-300 dark:bg-yellow-500 text-black dark:text-white font-extrabold text-lg uppercase shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#1E3A8A] hover:bg-yellow-400 dark:hover:bg-yellow-600 transition-all duration-200 ease-in-out whitespace-nowrap">
Book Slot
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>Composants associés
Memphis_Media_Component_Educational
Un composant multimédia réactif pour les plateformes éducatives, conçu avec une esthétique de style Memphis utilisant des couleurs vives, des formes géométriques et une palette de couleurs néon/électrique. Prend en charge le mode sombre.
Composant Composants multimédias
Un composant multimédia réactif pour les interfaces finance/banque, avec un design épuré, des tons bleus et la prise en charge du mode sombre. Comprend une zone de contenu principale avec une image, un titre, une description et un bouton d’action, ainsi qu’une liste d’articles ou d’informations connexes.
Composant multimédia minimaliste
Un composant multimédia simple, propre et réactif pour les sites Web d’entreprise, avec des couleurs bonbons/douces et la prise en charge du mode sombre.