Composants Capital Modal skeuomorphe

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.

Aperçu

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.

Ouvrir

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.

Ouvrir

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.

Ouvrir