Skeuomorphic Modal
A simple, responsive, skeuomorphic-inspired modal component for entertainment/media platforms, featuring cool neutral colors and dark mode support.
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>
Related Components
Retro Blog Modal
A retro-vintage inspired modal component for blog content, featuring a complementary color scheme, moderate complexity with interactive elements, responsive design, and dark mode support. No JavaScript is used, relying solely on HTML and Tailwind CSS classes. Images are sourced from picsum.photos and avatars from randomuser.me.
GlassmorphismModalComponent
A Glassmorphism-style modal component with analogous color scheme, moderate complexity, suitable for blog/content display. Features a responsive design with dark theme support using Tailwind CSS.
Skeuomorphic Modal Component
A complex responsive modal component styled in a skeuomorphic design with complementary colors for e-commerce.