搜索组件

类别

组件模态

模态

悬停时显示的附加信息

模态组件

一个复杂的响应式模态组件，具有黑色、白色和强调色方案，具有适合制造/工业应用的渐变过渡。包括深色模式支持。

                <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

一个复杂的响应式模态组件，采用孟菲斯/复古风格设计，适用于约会和社交平台，具有大胆的颜色、几何形状、交互式元素和深色模式支持。

打开预览

                <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

一个复杂的响应式模态组件，适用于医疗保健应用，灵感来自 Material Design，采用日落/暖色配色方案。包括表单元素、图像和深色模式支持。

打开预览

                <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

一个响应式的、受装饰艺术启发的模态组件，适用于政府和公共服务网站，具有几何图案、奢华的造型和类似的配色方案。包括深色模式支持。

打开预览

                <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

一个复杂的响应式 glassmorphism 模态组件，具有单色样式，适用于仪表板数据可视化和控制面板，包括暗模式支持。

打开预览

                <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>

企业 3D 三元模态

响应式 3D 设计的模态组件，具有三元配色方案，适用于商业和企业网站，具有深色模式支持。

打开预览

                <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>

模态组件

用于电子商务的复杂、响应式和交互式模态组件，具有互补的配色方案和微交互，用于用户参与。支持深色主题。

打开预览

                <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>

社交媒体帖子模态

一个简单、响应迅速、受 Material Design 启发的模态组件，具有相似的配色方案，适用于社交媒体应用程序。支持深色主题。

打开预览

                
<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 （玻璃形态模态组件）

一个 Glassmorphism 风格的模态组件，具有相似的配色方案，复杂度适中，适合博客/内容显示。具有响应式设计，使用 Tailwind CSS 支持深色主题。

打开预览

                <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

拟物化模态组件

一个复杂的响应式模态组件，采用拟物化设计风格，具有用于电子商务的互补色。

打开预览

                <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>