类别

所有组件

浏览所有可用的 Tailwind CSS 组件

登录/注册组件

一个使用Tailwind CSS的极简登录和注册组件，支持响应式效果和暗色主题。

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-72">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Login</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" placeholder="[email protected]" required>
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password" placeholder="••••••••" required>
      </div>
      <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700" type="submit">Login</button>
      <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-600">Sign up</a></p>
    </form>
  </div>
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-72 mt-8">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Sign Up</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email-signup">Email</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email-signup" placeholder="[email protected]" required>
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password-signup">Password</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password-signup" placeholder="••••••••" required>
      </div>
      <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700" type="submit">Sign Up</button>
      <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-600">Login</a></p>
    </form>
  </div>
  <div class="hidden">
    <img src="https://picsum.photos/600/400?random=1" alt="Placeholder" class="w-full h-auto">
    <img src="https://picsum.photos/600/400?random=2" alt="Placeholder" class="w-full h-auto">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16">
  </div>
</div>

目录组件

一个极简主义的响应式目录组件，使用Tailwind CSS样式，支持暗模式，并具有干净的设计元素。

打开预览

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="list-inside list-disc text-gray-600 dark:text-gray-300">
        <li class="py-1"><a href="#section1" class="hover:text-blue-600 dark:hover:text-blue-400">Section 1</a></li>
        <li class="py-1"><a href="#section2" class="hover:text-blue-600 dark:hover:text-blue-400">Section 2</a></li>
        <li class="py-1"><a href="#section3" class="hover:text-blue-600 dark:hover:text-blue-400">Section 3</a></li>
        <li class="py-1"><a href="#section4" class="hover:text-blue-600 dark:hover:text-blue-400">Section 4</a></li>
        <li class="py-1"><a href="#section5" class="hover:text-blue-600 dark:hover:text-blue-400">Section 5</a></li>
    </ul>
</div>

<div class="hidden md:flex items-center justify-center mt-8">
    <img src="https://picsum.photos/150" alt="Placeholder Image" class="rounded-full border-2 border-gray-300 dark:border-gray-700">
    <span class="ml-3 text-gray-600 dark:text-gray-300">Created by: <span class="font-semibold">John Doe</span></span>
</div>

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

媒体组件

一个采用拟物化风格的媒体组件，使用Tailwind CSS设计，具有响应式效果和暗色主题支持。

打开预览

                <div class="max-w-sm mx-auto">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Placeholder Image">
        <div class="p-6">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Media Title</h2>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the media component. It mimics a real-world object with its skeuomorphic design.</p>
            <div class="flex items-center mt-4">
                <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <div class="ml-3">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted by John Doe</p>
                    <p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    /* Dark theme support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1A202C;
        }
    }
</style>

标签云组件

一个采用拟物化风格的标签云组件，具有响应式效果，并使用Tailwind CSS支持暗色主题。

打开预览

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl">
    <h2 class="text-xl font-semibold mb-4">Tag Cloud</h2>
    <div class="flex flex-wrap gap-2">
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Web Development</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Design</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">SEO</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Marketing</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Programming</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Networking</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Cloud Computing</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Data Science</a>
    </div>
</div>

关注按钮组件

一个响应式的关注按钮组件，采用Material Design原则设计，支持暗模式，并使用Tailwind CSS进行定制样式。

打开预览

                <div class="flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-5 transition-shadow duration-300 hover:shadow-lg">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg mr-3">
      <div class="flex-1">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Me</h2>
        <p class="text-gray-600 dark:text-gray-400">Join my journey and stay updated!</p>
      </div>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
        Follow
      </button>
    </div>
  </div>
</div>

社区论坛组件

一个采用新拟态风格的社区论坛组件，具有头像、主题和暗色主题。

打开预览

                <div class="bg-gray-100 dark:bg-gray-800 py-8 px-4 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Community Forum</h1>
    <div class="flex flex-col space-y-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <h2 class="font-semibold text-gray-900 dark:text-white">John Doe</h2>
                <span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">2 hours ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300">What do you think about the latest updates in our community?</p>
            <div class="flex justify-between items-center mt-4">
                <button class="text-blue-500 hover:underline">Reply</button>
                <span class="text-gray-500 dark:text-gray-400 text-sm">10 replies</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <h2 class="font-semibold text-gray-900 dark:text-white">Jane Smith</h2>
                <span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">1 hour ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300">I love the new features! They really enhance the user experience.</p>
            <div class="flex justify-between items-center mt-4">
                <button class="text-blue-500 hover:underline">Reply</button>
                <span class="text-gray-500 dark:text-gray-400 text-sm">5 replies</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <h2 class="font-semibold text-gray-900 dark:text-white">Michael Lee</h2>
                <span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">30 minutes ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300">Can someone explain the upcoming changes in moderation?</p>
            <div class="flex justify-between items-center mt-4">
                <button class="text-blue-500 hover:underline">Reply</button>
                <span class="text-gray-500 dark:text-gray-400 text-sm">2 replies</span>
            </div>
        </div>
    </div>
</div>

导航增强组件

一个采用拟物化设计的导航组件，具有模仿现实世界配件的数字元素。它使用Tailwind CSS样式，具有响应式效果和暗色主题支持。

打开预览

                <nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 max-w-screen-lg mx-auto transition-all duration-300 ease-in-out">
    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-md">
            <h1 class="text-xl font-bold text-gray-800 dark:text-white">My Website</h1>
        </div>
        <div class="space-x-4 hidden md:flex">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Services</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">
                <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="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="md:flex md:items-center mt-4 space-x-4 hidden">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 shadow-md">
        <span class="text-gray-800 dark:text-white">User Name</span>
    </div>
</nav>

<!-- Mobile Menu -->
<div class="md:hidden bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 mt-2 transition-all duration-300 ease-in-out">
    <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">Home</a>
    <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">About</a>
    <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">Services</a>
    <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a>
</div>

<style>
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: white;
        }
    }
</style>

导航增强组件

一个采用野兽派美学设计的导航组件，具有大胆的设计、高对比度和不寻常的布局。它包括响应式效果，并支持CSS的暗色主题。

打开预览

                <nav class="bg-white dark:bg-gray-800 p-6">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50/50" alt="Logo" class="h-10 w-10 rounded-full border-2 border-black dark:border-white">
      <h1 class="text-2xl font-bold text-black dark:text-white">Brutal Nav</h1>
    </div>
    <ul class="flex space-x-6">
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#home">Home</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#about">About</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#services">Services</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </div>
  <div class="bg-gray-300 dark:bg-gray-700 my-6">
    <img src="https://picsum.photos/1200/300?random=1" alt="Banner" class="w-full h-auto">
  </div>
  <div class="container mx-auto py-6">
    <h2 class="text-xl font-bold text-black dark:text-white">Featured</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg"> 
        <img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 1</h3>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
        <img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 2</h3>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
        <img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 3</h3>
      </div>
    </div>
  </div>
  <footer class="bg-gray-200 dark:bg-gray-600 p-4 text-center">
    <p class="text-sm text-black dark:text-white">© 2023 Brutalism Design. All Rights Reserved.</p>
  </footer>
</nav>

OAuth 按钮组件

一个响应式的OAuth按钮组件，采用3D设计风格，支持暗色主题，并配有占位图像。该组件包含Google、Facebook、Twitter和LinkedIn的按钮，具有悬停效果以增加深度和互动性。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <h1 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Sign in with</h1>
    <div class="space-y-4">
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-600 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
            <img src="https://picsum.photos/20/20?random=1" alt="Google" class="rounded-full mr-2" />
            Google
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-700 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-600 dark:bg-blue-800 dark:hover:bg-blue-700">
            <img src="https://picsum.photos/20/20?random=2" alt="Facebook" class="rounded-full mr-2" />
            Facebook
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-500 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
            <img src="https://picsum.photos/20/20?random=3" alt="Twitter" class="rounded-full mr-2" />
            Twitter
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-900 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-800 dark:bg-blue-900 dark:hover:bg-blue-800">
            <img src="https://picsum.photos/20/20?random=4" alt="LinkedIn" class="rounded-full mr-2" />
            LinkedIn
        </a>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
            color: #ffffff;
        }
    }
</style>

喜欢/反应按钮组件

一个玻璃拟态风格的点赞/反应按钮组件，具有响应效果和使用 Tailwind CSS 支持暗模式。

打开预览

                <div class="flex justify-center items-center space-x-4 p-6 bg-white bg-opacity-10 backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center space-x-2">
        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-lg text-gray-900 dark:text-white">Like</span>
    </div>
    <button class="flex items-center p-2 text-white bg-blue-500 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 focus:outline-none">
        <span class="material-icons"> thumb_up </span>
    </button>
    <button class="flex items-center p-2 text-white bg-red-500 rounded-full transition duration-300 ease-in-out hover:bg-red-600 focus:outline-none">
        <span class="material-icons"> favorite </span>
    </button>
    <button class="flex items-center p-2 text-white bg-yellow-500 rounded-full transition duration-300 ease-in-out hover:bg-yellow-600 focus:outline-none">
        <span class="material-icons"> sentiment_satisfied </span>
    </button>
</div>

<style>
    /* Add Material Icons font link */
    @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
</style>

1 ... 231 232 233 234 235 ... 242