Components Modal Skeuomorphic Modal

Skeuomorphic Modal

A simple, responsive, skeuomorphic-inspired modal component for entertainment/media platforms, featuring cool neutral colors and dark mode support.

Preview

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.

Open

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.

Open

Skeuomorphic Modal Component

A complex responsive modal component styled in a skeuomorphic design with complementary colors for e-commerce.

Open