Composants Capital Memphis_Dating_Modal

Memphis_Dating_Modal

Un composant modal complexe et réactif conçu dans un style Memphis/Retro pour les plateformes de rencontres et sociales, avec des couleurs vives, des formes géométriques, des éléments interactifs et la prise en charge du mode sombre.

Aperçu

HTML Code

<div class="fixed inset-0 z-50 overflow-y-auto bg-gray-900 bg-opacity-75 flex items-center justify-center p-4 dark:bg-gray-950 dark:bg-opacity-85">
  <div class="relative w-full max-w-2xl mx-auto bg-white rounded-lg shadow-2xl overflow-hidden transform transition-all duration-300 scale-100 dark:bg-gray-800">
    <!-- Memphis Style Background Elements -->
    <div class="absolute inset-0 pointer-events-none overflow-hidden">
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-purple-400 rounded-full dark:bg-purple-600 opacity-60 mix-blend-multiply dark:mix-blend-screen transform rotate-45"></div>
      <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-yellow-300 rounded-lg dark:bg-yellow-500 opacity-60 mix-blend-multiply dark:mix-blend-screen transform -rotate-15"></div>
      <div class="absolute top-1/4 left-1/3 w-32 h-32 bg-pink-400 rounded-full dark:bg-pink-600 opacity-60 mix-blend-multiply dark:mix-blend-screen transform rotate-30"></div>
      <div class="absolute bottom-1/4 right-1/3 w-24 h-24 bg-teal-300 rounded-xl dark:bg-teal-500 opacity-60 mix-blend-multiply dark:mix-blend-screen transform -rotate-25"></div>
    </div>

    <!-- Modal Content -->
    <div class="relative flex flex-col md:flex-row bg-white bg-opacity-80 p-6 md:p-8 rounded-lg dark:bg-gray-800 dark:bg-opacity-80 border-4 border-gray-200 dark:border-gray-700">
      <!-- Close Button -->
      <button type="button" class="absolute top-3 right-3 p-2 rounded-full text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>

      <!-- Profile Image Section -->
      <div class="w-full md:w-2/5 flex-shrink-0 mb-6 md:mb-0 md:mr-8 flex items-center justify-center">
        <div class="relative w-48 h-48 md:w-56 md:h-56 rounded-full overflow-hidden border-4 border-pink-500 dark:border-pink-600 shadow-lg">
          <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile Picture">
          <div class="absolute inset-0 bg-gradient-to-t from-pink-500 to-transparent opacity-50"></div>
          <div class="absolute bottom-2 left-1/2 -translate-x-1/2 text-white font-bold text-xl drop-shadow-md">Sarah

Composants associés

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.

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

Corporate_Professional_Forum_Modal

Un composant modal complexe, réactif et professionnel pour les plates-formes de forum/communauté avec une palette de couleurs analogue et une prise en charge du mode sombre.

Ouvrir