所有组件

双因素认证组件

一个简单干净的双因素认证组件设计，使用 Tailwind CSS，具有响应效果和支持深色主题。

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-96">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Two-Factor Authentication</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please enter the code sent to your email.</p>
    <div class="mb-4">
      <input type="text" placeholder="Enter your code" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600" />
    </div>
    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">Verify</button>
    <div class="flex items-center justify-between mt-6">
      <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Resend Code</a>
      <a href="#" class="text-gray-500 dark:text-gray-400 hover:underline">Need Help?</a>
    </div>
    <div class="flex items-center justify-center mt-6">
      <img src="https://picsum.photos/50/50" alt="Placeholder Image" class="rounded-full shadow-md" />
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full shadow-md ml-2" />
    </div>
  </div>
</div>

视频播放器组件

一个响应式视频播放器组件，采用拟物化风格，使用 Tailwind CSS。它支持深色模式，具有微妙的阴影效果，使 UI 看起来柔和。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 max-w-lg w-full">
        <div class="flex justify-center mb-4">
            <video class="rounded-lg shadow-lg" controls>
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div class="text-sm">
                <p class="text-gray-900 dark:text-white font-medium">John Doe</p>
                <p class="text-gray-500 dark:text-gray-300">Uploaded 2 days ago</p>
            </div>
        </div>
        <div class="mt-4">
            <p class="text-gray-800 dark:text-gray-300">A brief description of the video content goes here. It can detail key points or the overall theme of the video.</p>
        </div>
    </div>
</div>

大菜单组件

一个响应式的大型菜单组件，采用玻璃拟态风格，具有磨砂玻璃般的半透明元素和模糊效果，使用 Tailwind CSS 支持深色主题。

打开预览

                <div class="relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
    <div class="absolute inset-0 bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 backdrop-blur-md"></div>
    <nav class="relative z-10">
        <div class="container mx-auto px-4 py-6">
            <div class="flex justify-between items-center">
                <div class="text-2xl font-bold text-gray-800 dark:text-white">Brand</div>
                <div class="hidden lg:flex space-x-8">
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Home</a>
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">About</a>
                    <div class="relative group">
                        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Services</a>
                        <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 rounded-lg shadow-lg group-hover:block">
                            <div class="p-4">
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Web Design</a>
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">SEO Services</a>
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Marketing</a>
                            </div>
                        </div>
                    </div>
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Contact</a>
                </div>
                <div class="lg:hidden">
                    <button class="text-gray-800 dark:text-white 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="M4 6h16M4 12h16m-7 6h7"/></svg>
                    </button>
                </div>
            </div>
        </div>
    </nav>
    <div class="hidden lg:block relative overflow-hidden">
        <img class="object-cover w-full h-64 opacity-50" src="https://picsum.photos/800/400" alt="Mega Menu Background">
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 p-6 rounded-lg shadow-lg">
                <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to Our Services</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Explore our range of services tailored for your business needs.</p>
                <a href="#" class="mt-4 inline-block bg-blue-500 text-white font-bold py-2 px-4 rounded-lg shadow hover:bg-blue-600">Get Started</a>
            </div>
        </div>
    </div>
    <footer class="text-center py-4 bg-gray-200 dark:bg-gray-700">
        <p class="text-gray-800 dark:text-white">© 2023 My Company</p>
    </footer>
</div>

双因素认证组件

一个设计有微交互的双因素认证组件，使用 Tailwind CSS 设计，具备响应效果和暗黑主题支持。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-4">Two-Factor Authentication</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter the code sent to your registered mobile number.</p>
        <div class="flex flex-col items-center">
            <input type="text" placeholder="Enter your code" class="w-full p-3 rounded border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all mb-4"/>
        </div>
        <div class="flex items-center justify-between mb-4">
            <button class="transition-transform transform hover:scale-105 bg-blue-500 text-white p-3 rounded-lg shadow-md hover:shadow-lg focus:ring-2 focus:ring-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500 dark:focus:ring-blue-300">Verify</button>
            <button class="text-blue-500 hover:underline dark:text-blue-400">Resend Code</button>
        </div>
        <hr class="my-4 border-gray-300 dark:border-gray-700"/>
        <div class="text-center">
            <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full mx-auto mb-2"/>
            <span class="text-gray-600 dark:text-gray-400">User's Name</span>
        </div>
    </div>
</div>

回到顶部按钮

一个极简的“返回顶部”按钮，使用 Tailwind CSS 设计，具备响应效果和暗黑主题支持。

打开预览

                <div class="fixed bottom-5 right-5 z-50">
  <a href="#" class="flex items-center justify-center w-12 h-12 bg-blue-500 text-white rounded-full shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
    </svg>
  </a>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    .bg-blue-500 {
      background-color: #3b82f6;
    }
    .hover\:bg-blue-600:hover {
      background-color: #2563eb;
    }
  }
</style>

导航增强组件

一个采用新拟态风格的导航组件，支持暗模式和响应式设计。

打开预览

                <nav class="bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg p-4 flex flex-col md:flex-row items-center justify-between transition-all duration-300">
    <div class="flex items-center">
        <img src="https://picsum.photos/40" alt="Logo" class="w-10 h-10 rounded-full shadow-md mb-2">
        <span class="text-xl font-semibold text-gray-800 dark:text-gray-200 ml-2">Brand Name</span>
    </div>
    <div class="flex flex-col md:flex-row md:space-x-4 mt-4 md:mt-0">
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Services</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Contact</a>
    </div>
    <div class="mt-4 md:mt-0">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md">
    </div>
</nav>

成功消息组件

一个 3D 设计风格的成功消息组件，具备响应效果和暗黑主题支持，并提供图像和头像的占位符。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md w-full transform transition-transform hover:scale-105">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/60/60" alt="Avatar" class="w-14 h-14 rounded-full shadow-md">
            <div class="flex-1">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
                <p class="text-gray-600 dark:text-gray-300">Your operation was completed successfully.</p>
            </div>
        </div>
        <div class="mt-4 space-x-2">
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md shadow hover:bg-blue-500 transition duration-300">Okay</a>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-300">Dismiss</a>
        </div>
    </div>
</div>

社交登录组件

一个极简的社交登录组件，使用 Tailwind CSS 设计，具备干净的空间和适用于明暗主题的响应效果。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
    <div class="bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-lg font-semibold text-center text-gray-800 dark:text-gray-200">Login with</h2>
        <div class="mt-4">
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition duration-200">
                <img src="https://picsum.photos/20/20" alt="Google Logo" class="mr-2 rounded-full">
                Google
            </button>
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-gray-600 hover:bg-gray-700 text-white rounded-md transition duration-200">
                <img src="https://randomuser.me/api/portraits/med/men/50.jpg" alt="Facebook Logo" class="mr-2 rounded-full">
                Facebook
            </button>
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-red-600 hover:bg-red-700 text-white rounded-md transition duration-200">
                <img src="https://picsum.photos/20/20" alt="Twitter Logo" class="mr-2 rounded-full">
                Twitter
            </button>
        </div>
        <div class="text-center">
            <p class="text-gray-600 dark:text-gray-300">or</p>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600">Sign in with email</a>
        </div>
    </div>
</div>

社区论坛组件

一个采用拟物化元素设计的社区论坛组件，具备响应式设计、暗黑主题支持以及头像和占位图像。

打开预览

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Community Forum</h1>
    <div class="border-b border-gray-300 dark:border-gray-600 mb-4 pb-2">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Latest Discussions</h2>
    </div>
    <div class="flex items-start mb-4 p-4 border border-gray-300 dark:border-gray-600 rounded-lg transition-shadow hover:shadow-lg">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div>
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
            <p class="text-gray-600 dark:text-gray-400">What’s the best way to learn Tailwind CSS?</p>
            <span class="text-gray-500 dark:text-gray-300 text-sm">5 comments - 2 hours ago</span>
        </div>
    </div>
    <div class="flex items-start mb-4 p-4 border border-gray-300 dark:border-gray-600 rounded-lg transition-shadow hover:shadow-lg">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div>
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
            <p class="text-gray-600 dark:text-gray-400">Can someone explain the flexbox model?</p>
            <span class="text-gray-500 dark:text-gray-300 text-sm">3 comments - 1 hour ago</span>
        </div>
    </div>
    <div class="flex items-start mb-4 p-4 border border-gray-300 dark:border-gray-600 rounded-lg transition-shadow hover:shadow-lg">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div>
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Mark Johnson</h3>
            <p class="text-gray-600 dark:text-gray-400">Tailwind vs Bootstrap: Which one to choose?</p>
            <span class="text-gray-500 dark:text-gray-300 text-sm">8 comments - 30 minutes ago</span>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Join the discussion!</h2>
        <textarea class="mt-2 w-full h-24 p-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Type your message here..."></textarea>
        <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-600 dark:hover:bg-blue-800 transition-all">Post</button>
    </div>
</div>

文件查看器组件

一个受怀旧的 80/90 年代美学启发的文件查看组件，使用 Tailwind CSS 设计，支持响应效果和暗黑主题。

打开预览

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
    <h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-white">File Viewer</h2>
    <div class="flex flex-col items-center">
        <div class="mb-4">
            <img src="https://picsum.photos/200/150" alt="File Thumbnail" class="w-full h-auto rounded-lg shadow-md transition-transform duration-300 hover:scale-105" />
        </div>
        <div class="text-center">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">File Name: Example Document.pdf</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Uploaded by:</p>
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mx-auto" />
            <p class="text-sm text-gray-700 dark:text-gray-300">John Doe</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Uploaded on: June 10, 2023</p>
        </div>
        <div class="mt-4">
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300">Open File</button>
            <button class="ml-2 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-800 dark:text-white font-bold py-2 px-4 rounded transition duration-300">Delete File</button>
        </div>
    </div>
</div>

类别