Playful_Booking_Media_Component
Un composant multimédia simple, ludique et réactif pour les systèmes de réservation, avec une palette de couleurs triadique, des éléments arrondis et la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-blue-50 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-md mx-auto bg-white dark:bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-4 border-rose-400 dark:border-rose-600">
<div class="relative bg-rose-200 dark:bg-rose-700 h-40 overflow-hidden flex items-center justify-center p-4">
<img src="https://picsum.photos/400/250?random=1" alt="Booking header image" class="absolute inset-0 w-full h-full object-cover rounded-t-3xl opacity-80">
<div class="absolute inset-0 bg-gradient-to-t from-rose-400/80 to-rose-200/50 dark:from-rose-800/80 dark:to-rose-700/50"></div>
<h2 class="relative text-center text-3xl sm:text-4xl font-extrabold text-white dark:text-gray-100 drop-shadow-lg leading-tight p-2">
Ready to Book Your Spot?
</h2>
</div>
<div class="p-6 sm:p-8 space-y-6 text-center">
<div class="flex justify-center -mt-16 mb-4">
<img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-yellow-300 dark:border-yellow-500 shadow-lg object-cover" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Service Provider Avatar">
</div>
<p class="text-gray-700 dark:text-gray-300 text-lg sm:text-xl font-semibold mb-4">
Hello! I'm <span class="text-rose-500 dark:text-rose-400">Alex</span>,<br>your friendly service provider.
</p>
<p class="text-gray-600 dark:text-gray-400 text-base sm:text-lg leading-relaxed">
Let's find the perfect time for your appointment. It's super easy!
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4 pt-4">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 transition-colors duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
<svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
Book Now
</a>
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border-2 border-yellow-400 dark:border-yellow-600 text-base font-medium rounded-full text-yellow-600 dark:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-gray-800 transition-colors duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
<svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.5-2.5L14.5 9l1.5-1.5L18 11.5V14a2 2 0 01-2 2H8a2 2 0 01-2-2V6a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.5-2.5L14.5 9l1.5-1.5L18 11.5V14a2 2 0 01-2 2H8a2 2 0 01-2-2V6c0-1.1.9-2 2-2h3.28a1 1 0 01.948.684L10.5 9z" />
</svg>
Learn More
</a>
</div>
</div>
</div>
</div>Composants associés
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.
Composant multimédia E-commerce Simple Neumorphism
Composant multimédia de style Neumorphisme avec des tons de terre, complexité simple, pour site de commerce électronique, avec un design réactif et une prise en charge du thème sombre. Utilise picsum.photos pour les images.
Composants multimédias Composante 39
Un composant multimédia conçu avec l’interface utilisateur du mode sombre, avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.