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
Cyberpunk_Dating_Media_Component
Un composant multimédia réactif pour les plateformes de rencontres/sociales avec une esthétique cyberpunk, avec des couleurs vives de bonbon, des arrière-plans sombres et des éléments interactifs. Prend en charge le mode sombre.
Skeuomorphic_Grayscale_Media_Component
Un composant multimédia complexe et réactif conçu dans un style skeuomorphe en niveaux de gris pour les sites Web d’entreprise, avec plusieurs éléments interactifs et la prise en charge du mode sombre.
Composant Composants multimédias
Un composant multimédia conçu avec le style skeuomorphism à l’aide de Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.