Search Components

Modal

Pop-up windows displaying content

Modal Component

A complex, responsive modal component with a black, white, and accent color scheme, featuring gradient transitions suitable for manufacturing/industrial applications. Includes dark mode support.

Open Preview

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-gray-950 dark:bg-opacity-85 lg:p-8">
  <div class="relative w-full max-w-2xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800 transform transition-all duration-300 ease-in-out scale-95 opacity-0 animate-scale-in ">
    <!-- animate-scale-in is a placeholder for a hypothetical animation class -->
    <div class="h-4 bg-gradient-to-r from-teal-500 to-indigo-600 dark:from-teal-600 dark:to-indigo-700"></div>
    <div class="p-6 md:p-8">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white md:text-3xl">Production Line Status</h2>
        <button type="button" class="text-gray-400 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 rounded-md p-1.5 transition-colors duration-200">
          <span class="sr-only">Close modal</span>
          <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>
      </div>

      <div class="mb-8 space-y-4 md:flex md:space-y-0 md:space-x-6">
        <div class="w-full p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600 flex-1">
          <p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Current Output</p>
          <p class="text-3xl font-extrabold text-teal-600 dark:text-teal-400 animate-pulse">1,245 <span class="text-lg font-normal text-gray-700 dark:text-gray-300">units/hr</span></p>
          <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2 dark:bg-gray-600">
            <div class="h-2.5 rounded-full bg-gradient-to-r from-teal-500 to-indigo-500 animating-width" style="width: 85%;"></div>
          </div>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">85% of target capacity</p>
        </div>
        <div class="w-full p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600 flex-1">
          <p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Efficiency Score</p>
          <p class="text-3xl font-extrabold text-indigo-600 dark:text-indigo-400 animate-pulse">92.3%</p>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 flex items-center">
            <svg class="w-4 h-4 mr-1 text-green-500" 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="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
            +1.2% in last 24h
          </p>
        </div>
      </div>

      <div class="grid grid-cols-1 gap-4 mb-8 md:grid-cols-2">
        <div class="p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600">
          <p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">System Alerts</p>
          <ul class="space-y-2">
            <li class="flex items-center text-sm text-red-600 dark:text-red-400">
              <svg class="w-5 h-5 mr-2" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
              Critical: Machine #3 Overheating
            </li>
            <li class="flex items-center text-sm text-amber-600 dark:text-amber-400">
              <svg class="w-5 h-5 mr-2" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
              Warning: Material Feed Low on Line 1
            </li>
            <li class="flex items-center text-sm text-gray-600 dark:text-gray-300">
              <svg class="w-5 h-5 mr-2" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              Maintenance task pending
            </li>
          </ul>
        </div>
        <div class="p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600">
          <p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Maintenance Team</p>
          <div class="flex -space-x-2 overflow-hidden mb-4">
            <img class="inline-block w-10 h-10 rounded-full ring-2 ring-white dark:ring-gray-800 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Smith">
            <img class="inline-block w-10 h-10 rounded-full ring-2 ring-white dark:ring-800 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Doe">
            <img class="inline-block w-10 h-10 rounded-full ring-2 ring-white dark:ring-800 object-cover" src="https://randomuser.me/api/portraits/men/51.jpg" alt="Avatar of Mark Johnson">
          </div>
          <p class="mb-2 text-sm text-gray-700 dark:text-gray-300">
            Upcoming Scheduled: <span class="font-semibold text-teal-600 dark:text-teal-400">Line 2 Inspection (08:00 AM)</span>
          </p>
          <a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-200">
            View All Tasks
            <svg class="w-4 h-4 ml-1" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>

      <div class="flex flex-col-reverse justify-end gap-3 sm:flex-row">
        <button type="button" class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200">
          Dismiss All Alerts
        </button>
        <button type="button" class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-white bg-gradient-to-r from-teal-500 to-indigo-600 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:from-teal-600 dark:to-indigo-700 transition-all duration-200 hover:scale-105 active:scale-95">
          Take Corrective Action
          <svg class="w-5 h-5 ml-2" 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="M9 5l7 7-7 7"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Memphis_Dating_Modal

A complex, responsive modal component designed in a Memphis/Retro style for dating and social platforms, featuring bold colors, geometric shapes, interactive elements, and dark mode support.

Open Preview

                <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

Healthcare_Medical_Modal_Component

A complex, responsive modal component for healthcare/medical applications, inspired by Material Design with a Sunset/Warm color scheme. Includes form elements, images, and dark mode support.

Open Preview

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-70 dark:bg-gray-900 dark:bg-opacity-80">
  <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto transform transition-all duration-300 scale-100 opacity-100
      border-t-4 border-orange-500 dark:border-red-600
      sm:w-11/12 md:w-3/4 lg:w-2/3 xl:w-1/2
      animate-fade-in-up">

    <!-- Modal Header -->
    <div class="flex items-center justify-between p-6 bg-gradient-to-r from-orange-400 to-red-500 dark:from-red-600 dark:to-orange-700 text-white rounded-t-md">
      <h2 class="text-2xl font-bold font-sans tracking-wide">Patient Consultation Details</h2>
      <button class="text-white hover:text-gray-100 transition-colors duration-200 text-3xl leading-none">
        &times;
      </button>
    </div>

    <!-- Modal Body -->
    <div class="p-6 space-y-6 md:space-y-8">

      <!-- Patient Info Section -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-center border-b border-gray-200 dark:border-gray-700 pb-6">
        <div class="md:col-span-1 flex justify-center">
          <img class="w-24 h-24 rounded-full border-4 border-orange-300 dark:border-red-500 shadow-md transform transition-transform duration-300 hover:scale-105" src="https://randomuser.me/api/portraits/men/8.jpg" alt="Patient Avatar">
        </div>
        <div class="md:col-span-2 text-center md:text-left">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400">ID: P-34567 | Age: 45 | Blood Type: O+</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Last Visit: 2023-10-26</p>
        </div>
      </div>

      <!-- Consultation Form -->
      <form class="space-y-6">
        <div>
          <label for="diagnosis" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Diagnosis</label>
          <textarea id="diagnosis" rows="4" class="block w-full px-4 py-3 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-orange-500 focus:border-orange-500
              bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
              shadow-sm transition-colors duration-200 resize-y" placeholder="Enter the diagnosis details..."></textarea>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label for="medication" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Prescribed Medication</label>
            <input type="text" id="medication" class="block w-full px-4 py-3 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-orange-500 focus:border-orange-500
                bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
                shadow-sm transition-colors duration-200" placeholder="e.g., Amoxicillin 500mg">
          </div>
          <div>
            <label for="dosage" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dosage & Frequency</label>
            <input type="text" id="dosage" class="block w-full px-4 py-3 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-orange-500 focus:border-orange-500
                bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
                shadow-sm transition-colors duration-200" placeholder="e.g., 1 tablet, 2 times a day">
          </div>
        </div>

        <div>
          <label for="follow-up" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Follow-up Date</label>
          <input type="date" id="follow-up" class="block w-full px-4 py-3 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-orange-500 focus:border-orange-500
              bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100
              shadow-sm transition-colors duration-200">
        </div>

        <!-- Attachments Section -->
        <div class="mt-8">
          <h4 class="text-md font-medium text-gray-800 dark:text-gray-200 mb-4">Attachments</h4>
          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
            <div class="relative group rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-200 hover:shadow-md">
              <img class="w-full h-24 object-cover" src="https://picsum.photos/id/1018/150/100" alt="Attachment 1">
              <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                <span class="text-white text-xs font-semibold">X-Ray.jpg</span>
              </div>
            </div>
            <div class="relative group rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-200 hover:shadow-md">
              <img class="w-full h-24 object-cover" src="https://picsum.photos/id/1020/150/100" alt="Attachment 2">
              <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                <span class="text-white text-xs font-semibold">Lab_Results.pdf</span>
              </div>
            </div>
            <div class="flex items-center justify-center rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 p-4 min-h-[96px]
                hover:border-orange-400 dark:hover:border-red-500 transition-colors duration-200 cursor-pointer">
              <label for="file-upload" class="flex flex-col items-center justify-center text-center text-gray-500 dark:text-gray-400 cursor-pointer">
                <svg class="w-6 h-6 mb-1" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                </svg>
                <span class="text-xs font-medium">Add File</span>
                <input id="file-upload" type="file" class="hidden">
              </label>
            </div>
          </div>
        </div>

      </form>

    </div>

    <!-- Modal Footer -->
    <div class="flex justify-end p-6 bg-gray-100 dark:bg-gray-700 rounded-b-md border-t border-gray-200 dark:border-gray-600 space-x-4">
      <button class="px-6 py-2 rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300
          hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 shadow-sm font-medium">
        Cancel
      </button>
      <button class="px-6 py-2 rounded-md bg-orange-500 hover:bg-orange-600 dark:bg-red-600 dark:hover:bg-red-700 text-white font-semibold transition-colors duration-200 shadow-md
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-red-600">
        Save Consultation
      </button>
    </div>

  </div>
</div>

<style>
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.3s ease-out forwards;
  }
</style>

Art_Deco_Government_Modal

A responsive, Art Deco-inspired modal component for government and public service websites, featuring geometric patterns, luxurious styling, and an analogous color scheme. Includes dark mode support.

Open Preview

                <div class="fixed inset-0 z-50 overflow-y-auto bg-gray-900 bg-opacity-75 dark:bg-gray-950 dark:bg-opacity-85 flex items-center justify-center p-4">
  <div class="relative w-full max-w-lg mx-auto bg-gradient-to-br from-emerald-100 to-emerald-300 dark:from-sky-900 dark:to-teal-950 rounded-lg shadow-2xl overflow-hidden transform transition-all duration-300 ease-out scale-100 opacity-100 border-4 border-emerald-500 dark:border-teal-400">
    <!-- Art Deco Top Border -->
    <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-emerald-600 via-teal-600 to-cyan-600 dark:from-teal-600 dark:via-sky-600 dark:to-cyan-600 transform skew-y-1 -translate-y-2"></div>
    <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-emerald-700 via-teal-700 to-cyan-700 dark:from-teal-700 dark:via-sky-700 dark:to-cyan-700 transform skew-y-1 -translate-y-1"></div>

    <!-- Modal Header -->
    <div class="flex items-center justify-between p-6 pb-4 bg-transparent border-b border-emerald-400 dark:border-teal-800 relative z-10">
      <h3 class="text-2xl md:text-3xl font-serif tracking-wide text-emerald-800 dark:text-teal-200 drop-shadow-lg" style="text-shadow: 2px 2px 0px rgba(0,0,0,0.1);">
        <i class="fas fa-balance-scale mr-3 text-emerald-600 dark:text-teal-400"></i>
        Official Notice
      </h3>
      <button type="button" class="text-emerald-700 dark:text-teal-300 hover:text-emerald-900 dark:hover:text-teal-100 transform rotate-45 transition-transform duration-200 text-3xl leading-none font-light focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-teal-400 rounded-full w-8 h-8 flex items-center justify-center">
        +
      </button>
    </div>

    <!-- Modal Body -->
    <div class="p-6 text-gray-800 dark:text-gray-100 relative">
      <div class="absolute inset-0 bg-white dark:bg-gray-800 opacity-20 dark:opacity-10 pointer-events-none" style="clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);"></div>
      <img src="https://picsum.photos/400/250" alt="Art Deco Building" class="w-full h-40 object-cover mb-4 rounded-md shadow-lg border-2 border-emerald-400 dark:border-teal-700 pointer-events-none">
      <p class="mb-4 text-base md:text-lg leading-relaxed">
        Dear Citizen,
        <br><br>
        We understand the importance of clear and timely communication. Please review the following critical information pertaining to our latest public service initiatives. Your engagement is vital for the betterment of our community.
      </p>
      <ul class="list-disc list-inside space-y-2 text-sm md:text-base mb-6 pl-4">
        <li class="font-medium text-emerald-700 dark:text-teal-300">
          <strong class="text-emerald-800 dark:text-teal-200">New Regulations:</strong> Effective <span class="font-semibold">October 26, 2024</span>.
        </li>
        <li class="font-medium text-emerald-700 dark:text-teal-300">
          <strong class="text-emerald-800 dark:text-teal-200">Public Forum:</strong> Scheduled online for <span class="font-semibold">November 10, 2024, 2:00 PM EST</span>.
        </li>
        <li class="font-medium text-emerald-700 dark:text-teal-300">
          <strong class="text-emerald-800 dark:text-teal-200">Support Line:</strong> Available M-F, 9 AM - 5 PM at <a href="tel:+18001234567" class="underline hover:no-underline text-cyan-600 dark:text-amber-300">1-800-123-4567</a>.
        </li>
      </ul>
      <p class="text-sm md:text-base text-gray-700 dark:text-gray-200">
        Thank you for your continued cooperation and understanding. We are committed to serving you.
      </p>
    </div>

    <!-- Modal Footer -->
    <div class="p-6 pt-4 bg-transparent border-t border-emerald-400 dark:border-teal-800 flex justify-end space-x-3 relative z-10">
      <button type="button" class="px-6 py-2 rounded-lg text-sm font-medium transition duration-200 ease-in-out
        bg-gradient-to-r from-emerald-500 to-emerald-600 text-white shadow-lg 
        hover:from-emerald-600 hover:to-emerald-700 
        dark:from-teal-600 dark:to-teal-700 dark:text-gray-100 dark:shadow-xl dark:hover:from-teal-700 dark:hover:to-teal-800
        focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-teal-500 focus:ring-offset-2 focus:ring-offset-emerald-100 dark:focus:ring-offset-sky-900">
        Decline
      </button>
      <button type="button" class="px-6 py-2 rounded-lg text-sm font-medium transition duration-200 ease-in-out
        bg-gradient-to-r from-cyan-600 to-teal-600 text-white shadow-lg 
        hover:from-cyan-700 hover:to-teal-700 
        dark:from-sky-500 dark:to-cyan-600 dark:text-gray-100 dark:shadow-xl dark:hover:from-sky-600 dark:hover:to-cyan-700
        focus:outline-none focus:ring-2 focus:ring-cyan-500 dark:focus:ring-sky-400 focus:ring-offset-2 focus:ring-offset-emerald-100 dark:focus:ring-offset-sky-900">
        Accept & Proceed
      </button>
    </div>

    <!-- Art Deco Bottom Border -->
    <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-r from-emerald-600 via-teal-600 to-cyan-600 dark:from-teal-600 dark:via-sky-600 dark:to-cyan-600 transform skew-y-1 translate-y-2"></div>
    <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-r from-emerald-700 via-teal-700 to-cyan-700 dark:from-teal-700 dark:via-sky-700 dark:to-cyan-700 transform skew-y-1 translate-y-1"></div>
  </div>
</div>

Glassmorphism_Dashboard_Modal

A complex, responsive glassmorphism modal component with monochromatic styling, suitable for dashboard data visualization and control panels, including dark mode support.

Open Preview

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-20 backdrop-blur-sm dark:bg-gray-900 dark:bg-opacity-40">
  <div class="relative w-full max-w-4xl max-h-[90vh] overflow-y-auto bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl border border-white border-opacity-20 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-30 transform transition-all sm:scale-100 opacity-100">
    <div class="p-6 sm:p-8 space-y-8">
      <!-- Modal Header -->
      <div class="flex items-center justify-between pb-4 border-b border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-white dark:text-gray-100 drop-shadow-lg">Dashboard Analytics Overview</h2>
        <button class="p-2 rounded-full text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-80 hover:bg-white hover:bg-opacity-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white focus:ring-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 dark:focus:ring-gray-600 transition duration-300">
          <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>
      </div>

      <!-- Modal Body - Grid Layout -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Card 1: Sales Summary -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20 transition duration-300 hover:scale-[1.02]">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">Total Sales</h3>
          <p class="text-4xl font-bold text-white dark:text-gray-50 mb-2 drop-shadow">$12,500</p>
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70">+8% from last month</p>
          <div class="mt-4 flex items-center justify-end">
            <span class="text-xs text-white text-opacity-60 dark:text-gray-400">Updated 2 mins ago</span>
          </div>
        </div>

        <!-- Card 2: New Customers -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20 transition duration-300 hover:scale-[1.02]">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">New Customers</h3>
          <p class="text-4xl font-bold text-white dark:text-gray-50 mb-2 drop-shadow">280</p>
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70">+15% from last week</p>
          <div class="mt-4 flex items-center justify-end">
            <span class="text-xs text-white text-opacity-60 dark:text-gray-400">Updated 1 hour ago</span>
          </div>
        </div>

        <!-- Card 3: Avg. Session Duration -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20 transition duration-300 hover:scale-[1.02]">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">Avg. Session</h3>
          <p class="text-4xl font-bold text-white dark:text-gray-50 mb-2 drop-shadow">03:45<span class="text-xl">min</span></p>
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70">-2% from yesterday</p>
          <div class="mt-4 flex items-center justify-end">
            <span class="text-xs text-white text-opacity-60 dark:text-gray-400">Refreshed now</span>
          </div>
        </div>

        <!-- Card 4: Recent Activities (List) -->
        <div class="md:col-span-2 bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-5 drop-shadow">Recent Activities</h3>
          <ul class="space-y-4">
            <li class="flex items-center space-x-3">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover border border-white border-opacity-30 dark:border-gray-600">
              <div class="flex-1">
                <p class="text-white dark:text-gray-100"><span class="font-medium">Jane Doe</span> updated product pricing.</p>
                <p class="text-xs text-white text-opacity-60 dark:text-gray-400">15 minutes ago</p>
              </div>
              <span class="text-sm text-white text-opacity-70 dark:text-gray-300 px-3 py-1 rounded-full bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30">Sales</span>
            </li>
            <li class="flex items-center space-x-3">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover border border-white border-opacity-30 dark:border-gray-600">
              <div class="flex-1">
                <p class="text-white dark:text-gray-100"><span class="font-medium">John Smith</span> added a new report.</p>
                <p class="text-xs text-white text-opacity-60 dark:text-gray-400">1 hour ago</p>
              </div>
              <span class="text-sm text-white text-opacity-70 dark:text-gray-300 px-3 py-1 rounded-full bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30">Data</span>
            </li>
            <li class="flex items-center space-x-3">
              <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover border border-white border-opacity-30 dark:border-gray-600">
              <div class="flex-1">
                <p class="text-white dark:text-gray-100"><span class="font-medium">Emily White</span> completed task 'CRM Integration'.</p>
                <p class="text-xs text-white text-opacity-60 dark:text-gray-400">Yesterday</p>
              </div>
              <span class="text-sm text-white text-opacity-70 dark:text-gray-300 px-3 py-1 rounded-full bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30">Project</span>
            </li>
          </ul>
        </div>

        <!-- Card 5: Performance Chart (Placeholder) -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 flex flex-col items-center justify-center dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">Quarterly Performance</h3>
          <img src="https://picsum.photos/300/200?grayscale&blur=5" alt="Chart Placeholder" class="w-full h-auto rounded-md object-cover opacity-70" />
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70 mt-3">Visualization data here.</p>
        </div>

      </div>

      <!-- Modal Footer -->
      <div class="pt-6 border-t border-white border-opacity-20 flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4 dark:border-gray-700 dark:border-opacity-30">
        <button class="flex-1 sm:flex-none px-6 py-3 rounded-full text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-80 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30 shadow-md hover:bg-white hover:bg-opacity-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white focus:ring-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 dark:focus:ring-gray-600 transition duration-300">
          Refresh Data
        </button>
        <button class="flex-1 sm:flex-none px-6 py-3 rounded-full bg-white bg-opacity-25 text-white font-semibold shadow-lg hover:bg-opacity-35 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:bg-gray-700 dark:bg-opacity-30 dark:hover:bg-opacity-40 dark:focus:ring-gray-600 transition duration-300">
          Close Panel
        </button>
      </div>
    </div>
  </div>
</div>

Corporate 3D Triadic Modal

A responsive, 3D-designed modal component with a triadic color scheme, suitable for business and corporate websites, featuring dark mode support.

Open Preview

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex justify-center items-center dark:bg-gray-900 dark:bg-opacity-70">
  <div class="relative p-8 bg-white dark:bg-gray-800 w-full max-w-md mx-auto rounded-3xl shadow-2xl transform transition-all duration-300 ease-in-out scale-100 opacity-100 rotate-x-0 group-hover:scale-105 group-hover:opacity-95 group-hover:rotate-x-3d-effect" style="transform-style: preserve-3d; transition: transform 0.6s ease; perspective: 1000px;">
    <!-- 3D depth effect for modal container -->
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 dark:from-blue-700 dark:via-purple-700 dark:to-pink-700 opacity-20 rounded-3xl" style="transform: translateZ(-20px);"></div>
    
    <div class="relative z-10">
      <h3 class="text-2xl font-extrabold text-gray-900 dark:text-white mb-6 text-center tracking-wide">
        <span class="inline-block" style="transform: translateZ(20px);">Welcome</span> 
        <span class="inline-block" style="transform: translateZ(10px);">to</span> 
        <span class="inline-block" style="transform: translateZ(0px);">Our Business</span>
      </h3>
      <div class="flex flex-col items-center mb-6">
        <img class="w-24 h-24 rounded-full border-4 border-blue-400 dark:border-blue-600 mb-4 shadow-lg" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" style="transform: translateZ(15px);">
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed text-center" style="transform: translateZ(5px);">
          Thank you for visiting. Explore our services and discover how we can help your business grow.
        </p>
      </div>
      <div class="grid grid-cols-2 gap-4 mb-6" style="transform: translateZ(10px);">
        <div class="text-center p-3 bg-blue-100 dark:bg-blue-900 rounded-lg shadow-md">
          <p class="text-blue-700 dark:text-blue-300 font-semibold text-lg">Solutions</p>
        </div>
        <div class="text-center p-3 bg-purple-100 dark:bg-purple-900 rounded-lg shadow-md">
          <p class="text-purple-700 dark:text-purple-300 font-semibold text-lg">Innovation</p>
        </div>
        <div class="col-span-2 text-center p-3 bg-pink-100 dark:bg-pink-900 rounded-lg shadow-md">
          <p class="text-pink-700 dark:text-pink-300 font-semibold text-lg">Growth</p>
        </div>
      </div>
      <div class="flex justify-end space-x-4">
        <button class="bg-gradient-to-r from-blue-500 to-purple-500 text-white dark:from-blue-700 dark:to-purple-700 dark:text-gray-100 py-3 px-6 rounded-full font-bold shadow-lg transform transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95" style="transform: translateZ(10px);">
          Learn More
        </button>
        <button class="bg-gray-300 text-gray-800 dark:bg-gray-600 dark:text-gray-200 py-3 px-6 rounded-full font-semibold shadow-md transform transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95" style="transform: translateZ(5px);">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

Modal Component

A complex, responsive and interactive modal component for e-commerce, with complementary color scheme and microinteractions for user engagement. Supports dark theme.

Open Preview

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
  <div class="relative p-8 border w-full max-w-md md:max-w-xl lg:max-w-3xl shadow-lg rounded-2xl bg-white dark:bg-gray-800 transform transition-all duration-500 scale-105 hover:scale-100">

    <!-- Close Button -->
    <div class="absolute top-4 right-4">
      <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition ease-in-out duration-300 transform hover:rotate-90 focus:outline-none">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Product Image and Details -->
    <div class="md:flex items-center">
      <div class="w-full md:w-1/2 rounded-lg overflow-hidden transform transition-all duration-500 hover:scale-105">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full h-auto object-cover">
      </div>
      <div class="w-full md:w-1/2 md:ml-6 mt-4 md:mt-0 text-center md:text-left">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight">Deluxe Smartwatch Pro</h2>
        <p class="text-sm text-indigo-600 dark:text-indigo-400 font-semibold mb-4">Electronics</p>
        <p class="text-gray-700 dark:text-gray-300 text-lg mb-4">Experience the future on your wrist with our Deluxe Smartwatch Pro. Track your fitness, receive notifications, and stay connected.</p>

        <div class="flex items-center justify-center md:justify-start mb-4">
          <span class="text-4xl font-bold text-teal-600 dark:text-teal-400 mr-3">$299</span>
          <span class="text-lg text-gray-500 dark:text-gray-400 line-through">$399</span>
          <span class="ml-3 px-3 py-1 bg-red-500 text-white text-xs font-semibold rounded-full transform hover:scale-110 transition duration-300">-25%</span>
        </div>
        
        <!-- Quantity Selector -->
        <div class="mb-5 flex items-center justify-center md:justify-start">
          <label for="quantity" class="text-gray-700 dark:text-gray-300 mr-3">Quantity:</label>
          <select id="quantity" name="quantity" class="form-select block w-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white transition duration-300 ease-in-out hover:border-indigo-400">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>

        <!-- Call to Action Buttons -->
        <div class="flex flex-col sm:flex-row justify-center md:justify-start space-y-3 sm:space-y-0 sm:space-x-4">
          <button class="flex-1 px-6 py-3 rounded-xl bg-indigo-600 text-white font-semibold text-lg hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
            Add to Cart
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block ml-2" viewBox="0 0 20 20" fill="currentColor">
              <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.5 13 5.707 13H17a1 1 0 000-2H5.707l.293-.293A.997.997 0 006 10.5V10h1a1 1 0 000-2H7V7a1 1 0 000-2h1a1 1 0 000-2H6.555L5.216 1.76C5.074 1.25 4.5 1 4 1H3zM4 16a1 1 0 100-2 1 1 0 000 2zm10 0a1 1 0 100-2 1 1 0 000 2z" />
            </svg>
          </button>
          <button class="flex-1 px-6 py-3 rounded-xl bg-teal-500 text-white font-semibold text-lg hover:bg-teal-600 dark:bg-teal-400 dark:hover:bg-teal-500 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-75">
            Buy Now
          </button>
        </div>

      </div>
    </div>

    <!-- Customer Reviews Section -->
    <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
      <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 text-center md:text-left">Customer Reviews</h3>
      
      <div class="space-y-6">
        <!-- Review 1 -->
        <div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm transform transition duration-300 hover:scale-[1.02]">
          <img class="h-12 w-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar">
          <div>
            <div class="flex items-center mb-1">
              <p class="font-semibold text-gray-900 dark:text-white mr-2">Jane Doe</p>
              <div class="flex text-yellow-400">
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-400">"Absolutely love this smartwatch! The features are incredible, and it looks super stylish."</p>
          </div>
        </div>

        <!-- Review 2 -->
        <div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm transform transition duration-300 hover:scale-[1.02]">
          <img class="h-12 w-12 rounded-full object-cover mr-4 ring-2 ring-teal-500" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar">
          <div>
            <div class="flex items-center mb-1">
              <p class="font-semibold text-gray-900 dark:text-white mr-2">John Smith</p>
              <div class="flex text-yellow-400">
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-400">"Great value for money. The battery life is impressive, and I love the vibrant display."</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

SocialMediaPostModal

A simple, responsive, Material Design-inspired modal component with analogous color scheme, suitable for social media applications. Supports dark theme.

Open Preview

                
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex justify-center items-center">
  <div class="relative p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
    <div class="mt-3 text-center">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Post Created!</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-400">Your post has been successfully shared with your followers.</p>
        <img class="mt-4 rounded-md" src="https://picsum.photos/400/200" alt="Placeholder image for social media post">
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-900">Awesome!</button>
      </div>
    </div>
  </div>
</div>

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 Preview

                <div class="fixed inset-0 bg-gray-900 bg-opacity-70 flex justify-center items-center p-4 z-50 dark:bg-opacity-80"> <div class="relative bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-6 md:p-8 lg:p-10 max-w-2xl w-full m-4 border border-opacity-30 border-white dark:bg-gray-800 dark:bg-opacity-20 dark:border-gray-700 text-gray-900 dark:text-white transform transition-all scale-100 opacity-100"> <!-- Close Button --> <button class="absolute top-4 right-4 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 transition duration-300 ease-in-out focus:outline-none"> <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 --> <div class="mb-6"> <h3 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2">The Wonders of Glassmorphism</h3> <p class="text-lg text-gray-800 dark:text-gray-200">Embrace the beauty of translucent design.</p> </div> <!-- Modal Content - Article Preview --> <div class="space-y-6 text-gray-800 dark:text-gray-200"> <img src="https://picsum.photos/600/350?random=1" alt="Abstract Glassmorphism Background" class="rounded-lg mb-4 shadow-md object-cover w-full h-auto"> <p class="leading-relaxed"> Glassmorphism is a design trend characterized by a frosted-glass effect, where backgrounds are blurred to create a sense of depth and translucency. This aesthetic often involves vibrant colors, light borders, and distinct layering, giving UI elements a sense of floating on the screen. It

Skeuomorphic Modal Component

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

Open Preview

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-opacity-50 bg-gray-900 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 w-11/12 md:w-1/3">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Item Details</h2>
    <div class="flex justify-center my-4">
      <img src="https://picsum.photos/200/300" alt="Product Image" class="rounded-lg shadow-md" />
    </div>
    <p class="text-gray-600 dark:text-gray-300">This is where you can detail the product features, specifications, and other necessary information to help customers make an informed decision.</p>
    <ul class="my-4 text-gray-700 dark:text-gray-200">
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 1</li>
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 2</li>
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 3</li>
    </ul>
    <div class="flex items-center justify-between my-4">
      <span class="text-lg font-bold text-gray-800 dark:text-gray-100">$19.99</span>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
    </div>
    <div class="flex justify-center my-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-white dark:border-gray-800" />
      <span class="text-gray-700 dark:text-gray-200 ml-2">John Doe</span>
    </div>
    <button class="mt-4 w-full bg-red-500 hover:bg-red-600 text-white font-bold py-2 rounded">Close</button>
  </div>
</div>

Search Components

Categories

Modal