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

Composant modal skeuomorphe

Un composant modal réactif complexe stylisé dans un design skeuomorphe avec des couleurs complémentaires pour le commerce électronique.

Ouvrir

Design Matériel Modal

Un composant modal de style Material Design avec un design réactif et une prise en charge du thème sombre. Comprend une superposition modale, un conteneur modal avec une apparence de carte et un bouton de fermeture. Aucun JavaScript n’est inclus.

Ouvrir

Réseaux sociauxPostModal

Un composant modal simple, réactif, inspiré du Material Design, avec une palette de couleurs analogue, adapté aux applications de médias sociaux. Prend en charge le thème sombre.

Ouvrir