Modal skeuomorphe
Un composant modal simple, réactif, inspiré du skeuomorphic pour les plateformes de divertissement/médias, avec des couleurs neutres froides et la prise en charge du mode sombre.
HTML Code
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-950 bg-opacity-75 dark:bg-black dark:bg-opacity-85">
<div class="relative w-full max-w-md mx-auto overflow-hidden rounded-xl shadow-2xl
bg-gradient-to-br from-gray-200 to-gray-400
dark:from-gray-700 dark:to-gray-900
border border-gray-300 dark:border-gray-600
transform transition-all duration-300 ease-in-out
scale-95 opacity-0 animate-modal-open
sm:p-6 p-4">
<!-- Close Button - Mimics a physical button -->
<button class="absolute top-3 right-3 text-gray-600 dark:text-gray-300
focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-200
dark:focus:ring-gray-400 dark:focus:ring-offset-gray-800
p-2 rounded-full
bg-gray-300 dark:bg-gray-800
shadow-md inner-shadow-light dark:inner-shadow-dark
hover:scale-105 active:scale-95 active:shadow-inner
transition-all duration-200 ease-in-out">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<!-- Modal Header - Embossed text effect -->
<h2 class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-4
text-shadow-emboss dark:text-shadow-emboss-dark sm:text-3xl lg:text-4xl">
Welcome Back!
</h2>
<!-- Content Section - Sunken Panel -->
<div class="p-4 sm:p-5 mb-6
bg-gray-100 dark:bg-gray-800
rounded-lg
shadow-inner-light dark:shadow-inner-dark
border border-gray-200 dark:border-gray-700">
<p class="text-gray-800 dark:text-gray-300 text-base sm:text-lg mb-4 leading-relaxed ">
Pick up where you left off. Explore new shows and movies curated just for you.
</p>
<img class="w-full h-32 sm:h-40 object-cover rounded-md mb-4
shadow-md border border-gray-300 dark:border-gray-600"
src="https://picsum.photos/400/250?random=1" alt="Placeholder image for media content">
<p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Now Playing: "Mysteries of the Deep"</p>
</div>
<!-- Action Buttons - Pill-shaped, pushable buttons -->
<div class="flex flex-col sm:flex-row gap-4">
<button class="flex-1 py-3 px-6 rounded-full
bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800
text-white font-semibold text-lg
shadow-md inner-shadow-blue dark:inner-shadow-blue-dark
hover:scale-105 active:scale-98 active:shadow-inner
transition-all duration-200 ease-in-out
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-200
dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800">
Continue Watching
</button>
<button class="flex-1 py-3 px-6 rounded-full
bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-600 dark:to-gray-800
text-gray-800 dark:text-gray-200 font-semibold text-lg
shadow-md inner-shadow-light dark:inner-shadow-dark
hover:scale-105 active:scale-98 active:shadow-inner
transition-all duration-200 ease-in-out
focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-200
dark:focus:ring-gray-400 dark:focus:ring-offset-gray-800">
Browse More
</button>
</div>
</div>
</div>
<!-- Custom Styles for Skeuomorphism -->
<style>
/* Base for general shadows */
.shadow-md {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Light Skeuomorphic Inner Shadow */
.inner-shadow-light {
box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.7), inset -2px -2px 5px rgba(180, 180, 180, 0.5);
}
.dark .inner-shadow-dark {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(100, 100, 100, 0.3);
}
/* Light Skeuomorphic Sunken Panel */
.shadow-inner-light {
box-shadow: inset 3px 3px 6px rgba(190, 190, 190, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
}
.dark .shadow-inner-dark {
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.7), inset -3px -3px 6px rgba(100, 100, 100, 0.4);
}
/* Blue buttons inner shadow */
.inner-shadow-blue {
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3), inset -2px -2px 5px rgba(255,255,255,0.4);
}
.dark .inner-shadow-blue-dark {
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.6), inset -2px -2px 5px rgba(0,50,100,0.3);
}
/* Embossed Text Effect */
.text-shadow-emboss {
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.3);
}
.dark .text-shadow-emboss-dark {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(100, 100, 100, 0.3);
}
/* Keyframe for modal entry animation */
@keyframes modal-open {
from {
opacity: 0;
transform: scale(0.95) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.animate-modal-open {
animation: modal-open 0.3s ease-out forwards;
}
</style>
Composants associés
Art_Deco_Government_Modal
Un composant modal réactif, inspiré de l’Art déco, pour les sites Web du gouvernement et des services publics, avec des motifs géométriques, un style luxueux et une palette de couleurs analogue. Inclut la prise en charge du mode sombre.
Composant modal rétro vintage
Un composant modal rétro/vintage réactif conçu avec Tailwind CSS qui inclut la prise en charge du mode sombre et l’esthétique nostalgique des années 80/90.
Modal d’apprentissage Cyberpunk
Un composant modal réactif, sur le thème du cyberpunk, pour les plateformes éducatives, avec des arrière-plans sombres, des accents néon et des éléments interactifs. Prend en charge le mode sombre.