搜索组件

类别

组件模态

模态

悬停时显示的附加信息

复杂的自然商业模态与微交互

一个复杂、响应迅速、具有微交互的地球色调模态组件，适用于商业网站，支持深色模式。

                <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="p-8 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800 transform transition-all duration-500 ease-in-out scale-95 hover:scale-100">
    <div class="text-center">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Modal Title</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">This is a complex modal with various interactive elements and a beautiful earth-toned color scheme, designed for business websites and supports dark mode.</p>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-green-700 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 transition transform duration-150 ease-in-out hover:scale-105">OK</button>
        <button id="cancel-btn" class="ml-3 px-4 py-2 bg-red-700 text-white text-base font-medium rounded-md shadow-sm hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 transition transform duration-150 ease-in-out hover:scale-105">Cancel</button>
      </div>
    </div>
  </div>
</div>

复古复古模态组件

一个简单的 retro/vintage 模态组件，带有互补的配色方案，用于展示工作或产品，使用 Tailwind CSS 设计。

打开预览

                <div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-80 dark:bg-black dark:bg-opacity-90">  <div class="bg-yellow-300 dark:bg-yellow-700 text-gray-800 dark:text-gray-200 rounded-lg p-6 max-w-md w-full shadow-lg">    <h2 class="text-lg font-bold mb-4">My Portfolio Item</h2>    <img class="mb-4 rounded" src="https://picsum.photos/300/200" alt="Portfolio Item">    <p class="mb-4">This is a short description of the portfolio item showcasing the work or product. Explore more to find out how it can benefit you!</p>    <div class="flex items-center">      <img class="rounded-full w-10 h-10 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">      <span class="font-semibold">John Doe</span>    </div>    <div class="mt-6 flex justify-end">      <button class="bg-yellow-500 hover:bg-yellow-600 dark:bg-yellow-600 dark:hover:bg-yellow-500 text-white font-bold py-2 px-4 rounded">Close</button>    </div>  </div></div>

拟物化自然风格模态组件

一个复杂的响应式模态组件，采用拟物化设计，地球色调配色方案，并支持黑暗主题，适合用作作品集。具有多个互动元素，无需JavaScript。

打开预览

                <div class="fixed inset-0 bg-stone-800 bg-opacity-75 flex items-center justify-center p-4">
  <div class="bg-gradient-to-br from-stone-100 to-stone-300 text-stone-800 rounded-lg shadow-2xl overflow-hidden max-w-2xl w-full">
    <div class="p-6 border-b border-stone-400">
      <h2 class="text-2xl font-bold text-stone-900 drop-shadow-md">Project Title</h2>
    </div>
    <div class="p-6">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <img src="https://picsum.photos/600/400?random=1" alt="Project Image" class="rounded-lg shadow-xl border-4 border-stone-300">
        </div>
        <div>
          <p class="text-stone-700 mb-4 leading-relaxed">This is a detailed description of the project. It highlights the key features, technologies used, and the goals achieved. The skeuomorphic design elements like soft shadows and gradients are used to give a sense of depth and realism.</p>
          <ul class="list-disc list-inside text-stone-600 space-y-2">
            <li>Feature 1: Detailed explanation</li>
            <li>Feature 2: Detailed explanation</li>
            <li>Feature 3: Detailed explanation</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="p-6 border-t border-stone-400 bg-stone-200 flex justify-end space-x-4">
      <button class="px-6 py-2 bg-stone-600 text-white font-semibold rounded-md shadow-lg hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50 transition ease-in-out duration-200">View Live</button>
      <button class="px-6 py-2 bg-stone-400 text-stone-800 font-semibold rounded-md shadow-lg hover:bg-stone-500 focus:outline-none focus:ring-2 focus:ring-stone-300 focus:ring-opacity-50 transition ease-in-out duration-200">Close</button>
    </div>
  </div>
</div>

<!-- Dark Mode -->
<div class="fixed inset-0 bg-stone-800 bg-opacity-75 flex items-center justify-center p-4 hidden dark:flex">
  <div class="bg-gradient-to-br from-stone-700 to-stone-900 text-stone-200 rounded-lg shadow-2xl overflow-hidden max-w-2xl w-full border border-stone-600">
    <div class="p-6 border-b border-stone-600">
      <h2 class="text-2xl font-bold text-stone-100 drop-shadow-md">Project Title</h2>
    </div>
    <div class="p-6">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <img src="https://picsum.photos/600/400?random=2" alt="Project Image" class="rounded-lg shadow-xl border-4 border-stone-600">
        </div>
        <div>
          <p class="text-stone-300 mb-4 leading-relaxed">This is a detailed description of the project in dark mode, maintaining the skeuomorphic design with darker tones and subtle highlights.</p>
          <ul class="list-disc list-inside text-stone-400 space-y-2">
            <li>Feature 1: Detailed explanation</li>
            <li>Feature 2: Detailed explanation</li>
            <li>Feature 3: Detailed explanation</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="p-6 border-t border-stone-600 bg-stone-800 flex justify-end space-x-4">
      <button class="px-6 py-2 bg-stone-500 text-white font-semibold rounded-md shadow-lg hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50 transition ease-in-out duration-200">View Live</button>
      <button class="px-6 py-2 bg-stone-600 text-stone-200 font-semibold rounded-md shadow-lg hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50 transition ease-in-out duration-200">Close</button>
    </div>
  </div>
</div>

模态组件

一个响应式模态组件，采用微交互和三元配色方案设计，适用于社交媒体界面。具有用户交互时的动画效果，并使用Tailwind CSS提供暗主题支持。

打开预览

                <div class="fixed z-50 inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900 transition-opacity duration-500 ease-in-out" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full">
    <div class="bg-gray-100 dark:bg-gray-700 px-4 py-5 sm:px-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">
        Share Your Thoughts
      </h3>
      <div class="mt-2">
        <p class="text-sm text-gray-500 dark:text-gray-300">
          Engage with your friends and share ideas or posts directly here.
        </p>
      </div>
    </div>
    <div class="p-6">
      <form class="space-y-4">
        <textarea class="w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500" placeholder="What's on your mind?"></textarea>
        <div class="flex items-center space-x-4">
          <img class="w-10 h-10 rounded-full shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <button type="submit" class="inline-flex justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Post
          </button>
        </div>
      </form>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
      <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
        Close
      </button>
    </div>
  </div>
</div>

复古博客模态

一个复古风格的模态组件，适用于博客内容，特色是互补的配色方案，适度复杂的互动元素，响应式设计，并支持深色模式。未使用JavaScript，仅依赖HTML和Tailwind CSS类。图片来源于picsum.photos，头像来源于randomuser.me。

打开预览

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-cyan-800 dark:text-white">
    <div class="mt-3 text-center">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-cyan-100 dark:bg-cyan-600">
        <svg class="h-6 w-6 text-cyan-600 dark:text-cyan-100" 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="M5 13l4 4L19 7"></path></svg>
      </div>
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Modal Title</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-200">Modal Content Goes Here. Replace with your blog content or message.</p>
        <img class="mt-4 rounded-md" src="https://picsum.photos/400/200" alt="Placeholder Image">
        <div class="flex justify-center mt-4">
          <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
        </div>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-cyan-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-cyan-600 focus:outline-none focus:ring-2 focus:ring-cyan-300 dark:bg-cyan-700 dark:hover:bg-cyan-900 dark:focus:ring-cyan-800">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

复古地球色调弹窗

用于仪表板的复古/老式模态组件，采用大地色调，具有暗模式和响应式设计。

打开预览

                <div class="fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full dark:bg-gray-800 dark:bg-opacity-75">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-stone-100 dark:bg-stone-700">
    <div class="mt-3 text-center">
      <div
        class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-emerald-100 dark:bg-emerald-700"
      >
        <svg
          class="h-6 w-6 text-emerald-600 dark:text-emerald-200"
          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="M5 13l4 4L19 7"
          ></path>
        </svg>
      </div>
      <h3
        class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100"
      >
        Dashboard Item Details
      </h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">
          Detailed information about the selected dashboard item. This is a placeholder for dynamic content.
        </p>
      </div>
      <div class="items-center px-4 py-3">
        <button
          id="ok-btn"
          class="px-4 py-2 bg-emerald-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:focus:ring-emerald-800"
        >
          Close
        </button>
      </div>
    </div>
  </div>
</div>

黑暗模式模态组件

一个简单且响应式的暗黑模式模态组件，设计用于阅读和内容消费。它具有互补色彩方案和极简布局，适合博客或内容驱动的网站。

打开预览

                <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900" role="dialog" aria-modal="true">
    <div class="bg-gray-900 rounded-lg shadow-lg max-w-sm w-full p-6">
        <button class="absolute top-3 right-3 text-gray-500 hover:text-gray-300 dark:text-gray-400 dark:hover:text-gray-200" aria-label="Close">&times;</button>
        <h2 class="text-xl text-white font-semibold mb-4">Blog Post Title</h2>
        <img class="w-full h-32 object-cover rounded-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image">
        <p class="text-gray-300 dark:text-gray-200 mb-4">This is a simple modal component designed for displaying content in dark mode. It is responsive and features a clean layout that aids in reading.</p>
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
                <p class="text-sm text-gray-400 dark:text-gray-300">Posted by John Doe</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">3 minutes ago</p>
            </div>
        </div>
    </div>
</div>

黑暗模式模态组件

一个简单的响应式模态组件，专为社交媒体界面设计，适用于暗黑模式，采用粉彩色方案。

打开预览

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-80 dark:bg-gray-800">
    <div class="bg-gray-800 rounded-lg shadow-lg w-11/12 md:w-1/3 p-6">
        <h2 class="text-xl font-bold text-white mb-4">Welcome to Our Community!</h2>
        <p class="text-gray-300 mb-4">Join us in sharing ideas, experiences, and connecting with one another. We believe in the power of community.</p>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <span class="text-pink-200 font-semibold">John Doe</span>
        </div>
        <img src="https://picsum.photos/300/150" alt="Placeholder" class="rounded-lg mb-4">
        <button class="w-full bg-pink-500 hover:bg-pink-400 text-white font-bold py-2 px-4 rounded">Join Now</button>
        <button class="w-full mt-2 bg-transparent border border-pink-500 hover:bg-pink-500 hover:text-white text-pink-500 font-bold py-2 px-4 rounded">Cancel</button>
    </div>
</div>

材料设计模态框

一个采用材料设计风格的模态组件，具有响应式设计和黑暗主题支持。包含模态覆盖、带有卡片外观的模态容器和关闭按钮。未包含JavaScript。

打开预览

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
  <div class="relative top-20 mx-auto 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-white">Modal Title</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">Modal content goes here. This is a placeholder for your information.</p>
      </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">Got It!</button>
      </div>
    </div>
  </div>
</div>

复古模态组件

一个响应式复古/复古风格的模态组件，使用Tailwind CSS设计，支持暗模式，融入怀旧的80年代/90年代美学。

打开预览

                <div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 transition-opacity" id="modal-wrapper">
    <div class="bg-white rounded-lg shadow-lg max-w-md w-full p-6 sm:p-8">
        <div class="flex justify-between items-center">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-300">Retro Modal Title</h2>
            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none" id="modal-close">
                &times;
            </button>
        </div>
        <div class="mt-4">
            <img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">This is a nostalgic modal component inspired by the vintage aesthetics of the 80s and 90s. It features a simple layout and dark mode support.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">John Doe</span>
            </div>
        </div>
        <div class="mt-6 flex justify-end">
            <button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Action</button>
        </div>
    </div>
</div>
<!-- Dark Mode Styles -->
<style>
    @media (prefers-color-scheme: dark) {
        #modal-wrapper {
            background-color: rgba(31, 41, 55, 0.75);
        }
    }
</style>