CCHub Logo CCHub Tailwind Collection
구성 요소 수도 Memphis_Dating_Modal

Memphis_Dating_Modal

데이트 및 소셜 플랫폼을 위해 멤피스/레트로 스타일로 디자인된 복잡하고 반응이 빠른 모달 구성 요소로, 대담한 색상, 기하학적 모양, 대화형 요소 및 다크 모드 지원을 특징으로 합니다.

미리 보기

HTML 코드 

<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

관련 구성 요소

네온 대시보드 모달

네온/글로우 효과가 있는 복잡하고 반응이 빠른 대시보드 모달로, 가을 색상, 다크 모드 지원 및 대화형 요소를 사용합니다. 데이터 시각화 및 제어판을 위해 설계되었습니다.

열다

스큐어모픽 소셜 미디어 모달

소셜 미디어 상호 작용을 위해 설계된 적당히 복잡하고 반응이 빠른 스큐어모픽 모달 구성 요소로, 보색 구성표와 다크 모드 지원을 특징으로 합니다.

열다

머티리얼 디자인 모달

반응형 디자인과 어두운 테마를 지원하는 Material Design 스타일의 Modal Component입니다. 모달 오버레이, 카드와 같은 모양의 모달 컨테이너 및 닫기 버튼이 포함됩니다. JavaScript는 포함되어 있지 않습니다.

열다