搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

数据可视化组件

一个采用受 80 年代和 90 年代启发的复古/古董美学设计的响应式数据可视化组件，支持深色主题，并使用占位图像。

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold mb-4 text-center">Data Visualization</h2>
    <div class="mb-4">
        <h3 class="text-lg font-semibold mb-2">User Statistics</h3>
        <div class="overflow-hidden rounded-lg">
            <img class="w-full h-32 object-cover" src="https://picsum.photos/id/237/400/200" alt="Data Visualization Image">
        </div>
        <p class="mt-2 text-sm">This chart represents the users joining over the past year.</p>
    </div>
    <div class="font-mono mb-6">
        <p class="text-sm">Last updated: <span class="font-bold">2 days ago</span></p>
    </div>
    <div class="bg-gray-700 p-4 text-center rounded-lg">
        <h3 class="text-lg font-semibold">Profile Overview</h3>
        <div class="flex justify-around mt-4">
            <div class="flex flex-col items-center">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <span class="mt-2 text-sm">User 1</span>
            </div>
            <div class="flex flex-col items-center">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
                <span class="mt-2 text-sm">User 2</span>
            </div>
        </div>
    </div>
    <style>
        @media (prefers-color-scheme: dark) {
            .bg-gray-800 {
                background-color: #1f2937;
            }
            .bg-gray-700 {
                background-color: #374151;
            }
        }
    </style>
</div>

注册表单组件

一个具有微交互和深色主题支持的响应式注册表单组件，使用 Tailwind CSS 进行样式设计。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-11/12 max-w-md">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-6">Create an Account</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="name">Full Name</label>
        <input type="text" id="name" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="John Doe" required>
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email Address</label>
        <input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="johndoe@example.com" required>
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
        <input type="password" id="password" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="********" required>
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="avatar">Profile Picture</label>
        <div class="flex items-center mb-2">
          <img id="avatar" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 mr-3">
          <input type="file" class="bg-gray-200 dark:bg-gray-700 rounded p-2 dark:border-gray-700" accept="image/*">
        </div>
        <div class="text-xs text-gray-500 dark:text-gray-400">Upload a profile picture (optional)</div>
      </div>

      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 rounded transition duration-200">Register</button>
    </form>
  </div>
</div>

导航增强组件

一个采用粗野主义风格设计的导航增强组件，具有响应式效果、深色主题支持和占位图像。

打开预览

                <nav class="bg-white dark:bg-gray-900 p-6 text-center">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50" alt="Logo" class="rounded-full border-2 border-black dark:border-white">
      <h1 class="text-3xl font-bold text-black dark:text-white">Brutalist Navigation</h1>
    </div>
    <ul class="flex space-x-6 mt-4 md:mt-0">
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Services</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
  <div class="mt-8">
    <h2 class="text-xl text-black dark:text-white">Featured</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100" alt="Placeholder Image 1" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">Raw and bold imagery.</p>
      </div>
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image 2" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">Unusual and eye-catching layouts.</p>
      </div>
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image 3" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">High contrast designs.</p>
      </div>
    </div>
  </div>
</nav>

3D设计标题

一个具有 3D 设计元素和支持深色模式的响应式头部组件。

打开预览

                <header class="bg-white shadow-lg dark:bg-gray-800">
  <div class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">3D Header</div>
      <div class="hidden md:block">
        <nav>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">Home</a>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">About</a>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">Contact</a>
        </nav>
      </div>
    </div>
  </div>
</header>

导航增强组件

一个为深色模式设计并使用 Tailwind CSS 的响应式导航组件，具有 logo、图像和头像的占位符。

打开预览

                <nav class="bg-gray-900 text-white p-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50" alt="Logo" class="mr-3 rounded-full">
            <span class="text-xl font-bold">MyApp</span>
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-gray-300">Home</a>
            <a href="#" class="hover:text-gray-300">About</a>
            <a href="#" class="hover:text-gray-300">Services</a>
            <a href="#" class="hover:text-gray-300">Contact</a>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border border-gray-700">
            <button class="ml-4 p-2 bg-gray-700 rounded hover:bg-gray-600 focus:outline-none">Menu</button>
        </div>
    </div>
</nav>
<div class="bg-gray-800 text-white p-4">
    <div class="container mx-auto flex flex-col md:flex-row md:justify-between">
        <div class="flex items-center mb-4 md:mb-0">
            <img src="https://picsum.photos/100/100" alt="Placeholder Image" class="rounded-lg">
            <p class="ml-4">This is a simple navigation enhancement component in dark mode.</p>
        </div>
        <div class="flex space-x-4">
            <a href="#" class="bg-gray-700 px-4 py-2 rounded hover:bg-gray-600">Action 1</a>
            <a href="#" class="bg-gray-700 px-4 py-2 rounded hover:bg-gray-600">Action 2</a>
        </div>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #fff;
        }
    }
</style>

视频播放器组件

一个采用玻璃拟态风格设计的响应式视频播放器组件，具有类似磨砂玻璃的半透明元素和模糊效果，支持深色主题，并带有占位图像。

打开预览

                <div class="flex flex-col items-center justify-center w-full h-screen bg-gray-800">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg p-4 rounded-lg shadow-lg w-full max-w-md">
        <div class="relative w-full aspect-w-16 aspect-h-9">
            <video class="rounded-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="mt-4 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="text-white">
                <h3 class="text-lg font-semibold">Video Title</h3>
                <p class="text-sm text-gray-300">Uploaded by User Name</p>
            </div>
        </div>
        <div class="flex justify-around mt-4">
            <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 focus:outline-none">Like</button>
            <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 focus:outline-none">Share</button>
        </div>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
        .bg-white {
            background-color: rgba(255, 255, 255, 0.2);
        }
        .text-white {
            color: #edf2f7;
        }
        .text-gray-300 {
            color: #e2e8f0;
        }
    }
</style>

粘性导航（玻璃拟态）

带有玻璃拟态风格的粘性导航组件，响应式，并支持深色主题。

打开预览

                <nav class="sticky top-0 z-10 backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white shadow-lg">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <div class="flex-shrink-0">
        <span class="text-2xl font-semibold text-gray-900 dark:text-white">Glassmorphism Nav</span>
      </div>
      <div class="hidden md:block">
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
      </div>
      <div class="-mr-2 flex md:hidden">
        <button type="button" class="bg-gray-100 dark:bg-gray-700 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-200 dark:hover:text-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" 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>
      </div>
    </div>
  </div>

  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Services</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
    </div>
  </div>
</nav>

列组件拟态

列组件拟态设计 - 一种柔和的用户界面风格，通过微妙的阴影创建看似从背景中凸出的元素。该组件是响应式的，并支持深色主题。无需 JavaScript 代码，深色模式下 CSS 支持即可。

打开预览

                <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 p-4 dark:bg-gray-800">
  <div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
    <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 1</h3>
    <p class="text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
    <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 2</h3>
    <p class="text-gray-600 dark:text-gray-300 text-center">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
    <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 3</h3>
    <p class="text-gray-600 dark:text-gray-300 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</div>

<style>
/* Basic Neumorphism shadows - adjust values for desired effect */
.shadow-xl {
  box-shadow: 8px 8px 15px #b0b0b0, -8px -8px 15px #ffffff;
}

.dark .shadow-xl-dark {
  box-shadow: 8px 8px 15px #444444, -8px -8px 15px #333333;
}
</style>

内容显示组件

一个用玻璃拟态风格设计的响应式内容展示组件，具有模糊背景和半透明元素，支持深色模式。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Content Display Title</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">This component features a glassmorphism style with blurred background and translucent elements.</p>
        <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">User Name</h3>
                <span class="text-sm text-gray-500 dark:text-gray-400">User Title</span>
            </div>
        </div>
        <img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition duration-200">Read More</button>
    </div>
</div>

导航组件

一个为深色模式设计并使用 Tailwind CSS 的响应式导航组件。

打开预览

                <nav class="bg-gray-900 text-white p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-semibold">Brand</a>
            <a href="#" class="hidden md:block">Home</a>
            <a href="#" class="hidden md:block">About</a>
            <a href="#" class="hidden md:block">Services</a>
            <a href="#" class="hidden md:block">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <input type="text" placeholder="Search..." class="bg-gray-800 text-white p-2 rounded-md" />
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"/>
        </div>
    </div>
</nav>

<main class="bg-gray-800 min-h-screen p-4">
    <h1 class="text-3xl mb-4">Welcome to Our Website</h1>
    <img src="https://picsum.photos/800/300" alt="Placeholder" class="w-full rounded-lg mb-4" />
    <p class="text-gray-300">This is a simple layout demo for the Navigation Component.</p>
</main>

<footer class="bg-gray-900 text-white p-4">
    <div class="container mx-auto text-center">
        <p>© 2023 Navigation Component. All rights reserved.</p>
    </div>
</footer>

1 ... 257 258 259 260 261 ... 315