所有组件

过滤器组件

一个采用拟物化风格设计的过滤器组件，具备响应效果和暗黑主题支持。该组件使用 Tailwind CSS 进行样式设计，并包含随机占位图像和头像。

                <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
  <h2 class="text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Filters</h2>
  <div class="space-y-4">
    <div class="flex items-center">
      <input type="checkbox" id="filter1" class="w-4 h-4 text-green-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-600" />
      <label for="filter1" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 1</label>
    </div>
    <div class="flex items-center">
      <input type="checkbox" id="filter2" class="w-4 h-4 text-blue-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" />
      <label for="filter2" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 2</label>
    </div>
    <div class="flex items-center">
      <input type="checkbox" id="filter3" class="w-4 h-4 text-red-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-red-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-red-600" />
      <label for="filter3" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 3</label>
    </div>
  </div>
  <div class="mt-6">
    <button class="w-full text-white bg-blue-500 hover:bg-blue-700 rounded-lg p-2 text-center transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-600">Apply Filters</button>
  </div>
  <div class="mt-4">
    <img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="rounded-lg shadow-md" />
    <img src="https://picsum.photos/400/200?random=2" alt="Random Image" class="rounded-lg shadow-md mt-4" />
  </div>
  <div class="flex justify-between items-center mt-4">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-lg" />
    <span class="text-gray-800 dark:text-gray-200">User Name</span>
  </div>
</div>

360° 查看器组件

一个具备拟物化设计的 360° 观察组件，使用 Tailwind CSS，支持响应效果和暗黑主题。

打开预览

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center">360° Viewer</h2>
        <div class="relative w-full h-64 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/600/400" alt="360° View" class="w-full h-full object-cover rotate-360" />
            <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
                <div class="p-2 bg-gray-300 dark:bg-gray-600 rounded-full shadow-lg">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-white shadow-md" />
                </div>
            </div>
        </div>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Interact with the 360° view to explore the surroundings.</p>
        </div>
    </div>
</div>

粗犷主义评级系统组件

一个使用 Tailwind CSS 设计的响应式评分系统组件，采用粗野主义风格，并支持暗黑主题。

打开预览

                <div class="flex flex-col items-center bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md w-80">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Rate Us!</h2>
    <div class="flex items-center mb-5">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-3 border-2 border-gray-800 dark:border-gray-200">
        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</span>
    </div>
    <div class="flex space-x-1 mb-4">
        <span class="cursor-pointer text-3xl text-yellow-500">★</span>
        <span class="cursor-pointer text-3xl text-yellow-500">★</span>
        <span class="cursor-pointer text-3xl text-yellow-500">★</span>
        <span class="cursor-pointer text-3xl text-gray-300 dark:text-gray-500">★</span>
        <span class="cursor-pointer text-3xl text-gray-300 dark:text-gray-500">★</span>
    </div>
    <textarea class="w-full h-24 p-2 border-2 border-gray-800 dark:border-gray-200 bg-transparent text-gray-800 dark:text-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="Leave your feedback..."></textarea>
    <button class="mt-4 px-4 py-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-semibold rounded-md hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-500">Submit</button>
</div>

社交组件

一个网络组件，具有玻璃形态设计，带有磨砂玻璃般的半透明元素和模糊效果，响应式效果，以及黑暗主题支持。

打开预览

                <div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-500">
    <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-80 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center">Connect with Us</h2>
        <div class="flex items-center justify-around flex-wrap mb-4">
            <div class="flex flex-col items-center">
                <img src="https://picsum.photos/80/80?random=1" alt="User Avatar" class="rounded-full mb-2">
                <p class="text-gray-800 dark:text-white">User 1</p>
                <a href="#" class="text-blue-500 hover:underline">Follow</a>
            </div>
            <div class="flex flex-col items-center">
                <img src="https://picsum.photos/80/80?random=2" alt="User Avatar" class="rounded-full mb-2">
                <p class="text-gray-800 dark:text-white">User 2</p>
                <a href="#" class="text-blue-500 hover:underline">Follow</a>
            </div>
            <div class="flex flex-col items-center">
                <img src="https://picsum.photos/80/80?random=3" alt="User Avatar" class="rounded-full mb-2">
                <p class="text-gray-800 dark:text-white">User 3</p>
                <a href="#" class="text-blue-500 hover:underline">Follow</a>
            </div>
        </div>
        <div class="text-center">
            <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300">View More</button>
        </div>
    </div>
</div>

产品画廊组件

一个为暗模式设计的响应式产品画廊组件，具有图像和头像，使用Tailwind CSS。

打开预览

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 1</h3>
                <p class="text-gray-400">$29.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 2</h3>
                <p class="text-gray-400">$39.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 3</h3>
                <p class="text-gray-400">$49.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 4</h3>
                <p class="text-gray-400">$59.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 5</h3>
                <p class="text-gray-400">$69.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 6</h3>
                <p class="text-gray-400">$79.99</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-xl font-semibold mb-2">Featured Seller</h2>
        <div class="flex items-center bg-gray-800 p-3 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <p class="font-semibold">John Doe</p>
                <p class="text-gray-400">Best Seller</p>
            </div>
        </div>
    </div>
</div>

点赞/反应按钮组件

一个网络组件，具有点赞和反应按钮，带有微交互，并支持使用Tailwind CSS的黑暗主题。

打开预览

                <div class="flex flex-col items-center justify-center p-4">
  <h2 class="text-xl font-semibold mb-4 dark:text-white">React to this</h2>
  <div class="flex space-x-4">
    <button class="group bg-blue-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20" alt="like" class="rounded-full">
        <span>Like</span>
      </span>
    </button>
    <button class="group bg-gray-300 text-gray-800 px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=1" alt="love" class="rounded-full">
        <span>Love</span>
      </span>
    </button>
    <button class="group bg-yellow-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-yellow-600 focus:outline-none focus:ring focus:ring-yellow-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=2" alt="laugh" class="rounded-full">
        <span>Laugh</span>
      </span>
    </button>
    <button class="group bg-red-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-red-600 focus:outline-none focus:ring focus:ring-red-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=3" alt="wow" class="rounded-full">
        <span>Wow</span>
      </span>
    </button>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a1a1a;
      color: #ffffff;
    }
  }
</style>

黑暗模式验证码组件

一个为暗模式UI设计的CAPTCHA组件，具有响应式效果和黑暗主题支持。

打开预览

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-lg font-semibold mb-4">Verify You're Human</h2>
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50" alt="Random Image" class="w-12 h-12 rounded-full mr-3" />
        <span class="flex-1 text-sm">Please identify the image below:</span>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/250/150" alt="CAPTCHA Image" class="w-full h-auto rounded-md" />
    </div>
    <div class="flex space-x-4">
        <button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Verify</button>
        <button class="bg-gray-500 hover:bg-gray-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Refresh</button>
    </div>
</div>

回到顶部按钮组件

一个响应式的返回顶部按钮，采用仿生设计风格，支持黑暗主题和响应式效果。

打开预览

                <div class="fixed bottom-10 right-10 z-50">
    <a href="#top" class="bg-white dark:bg-gray-800 rounded-full shadow-lg p-3 transition-transform transform hover:scale-110"> 
        <img src="https://picsum.photos/50/50?random=1" alt="Back to Top" class="w-full h-full rounded-full">
    </a>
    <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white text-sm rounded-lg shadow-md p-2 mt-2 text-center">
        Back to Top
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white { background-color: #1f2937; }
    .bg-gray-200 { background-color: #4b5563; }
    .bg-gray-700 { background-color: #2d3748; }
    .text-gray-800 { color: #f7fafc; }
}
</style>

媒体组件

一个响应式媒体组件，带有诱人的动画微交互，使用Tailwind CSS设计。支持黑暗主题，并包含占位符图像和头像。

打开预览

                <div class="w-full max-w-xs bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl duration-300">
    <img src="https://picsum.photos/400/200" alt="Media Image" class="w-full h-32 object-cover">
    <div class="p-4">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-md">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Media Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Media description goes here. It can be a brief overview or any content relevant to the media.</p>
            </div>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <button class="w-full py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-150">Watch Now</button>
    </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>

类别