类别

所有组件

浏览所有可用的 Tailwind CSS 组件

功能组件 - 残酷主义风格

一个采用粗犷主义风格设计的功能性网页组件，使用 Tailwind CSS。该组件具有大胆的布局、高对比度、响应效果，并支持深色主题。它包括占位图像和头像以增强视觉吸引力。

                <div class="flex flex-col items-center justify-center min-h-screen p-6 bg-white dark:bg-gray-800">
    <div class="container mx-auto w-full max-w-4xl p-6 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg">
        <h1 class="text-4xl font-bold text-black dark:text-white mb-4">Brutalist Functional Component</h1>
        <p class="text-lg text-gray-800 dark:text-gray-300 mb-6">
            This component showcases a raw and bold design aesthetic typical of brutalism. 
            It emphasizes usability and content over polished interfaces.
        </p>
        <div class="flex flex-wrap justify-between gap-4">
            <div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
                <img src="https://picsum.photos/400/300" alt="Random Image" class="w-full h-auto rounded mb-2">
                <h2 class="text-xl font-semibold text-black dark:text-white">Section 1</h2>
                <p class="text-gray-700 dark:text-gray-200">This section contains a brief description with a bold design that embraces simplicity.</p>
            </div>
            <div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
                <img src="https://picsum.photos/400/301" alt="Random Image" class="w-full h-auto rounded mb-2">
                <h2 class="text-xl font-semibold text-black dark:text-white">Section 2</h2>
                <p class="text-gray-700 dark:text-gray-200">Another section to demonstrate the design. High contrast provides a striking look.</p>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-500 dark:border-gray-400 pt-4">
            <h2 class="text-2xl font-bold text-black dark:text-white">User Information</h2>
            <div class="flex items-center gap-4 mt-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow">
                <div>
                    <h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
                    <p class="text-gray-600 dark:text-gray-300">Web Developer</p>
                </div>
            </div>
        </div>
    </div>
</div>

地图组件

一个具有玻璃风格设计的地图组件，具有响应效果和深色主题支持，利用 Tailwind CSS。

打开预览

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg w-full">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-4">Our Locations</h2>
    <div class="relative">
      <img src="https://picsum.photos/600/400?random=1" alt="Map Image" class="rounded-lg" />
      <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
        <p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location A</p>
      </div>
      <div class="absolute top-1/4 right-1/4 w-full h-full flex flex-col justify-center items-center">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
        <p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location B</p>
      </div>
      <div class="absolute bottom-0 left-1/4 w-full h-full flex flex-col justify-center items-center">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
        <p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location C</p>
      </div>
    </div>
    <div class="flex justify-between mt-4">
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">View More</button>
      <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Contact Us</button>
    </div>
  </div>
</div>

复古音频播放器

实现复古/老式设计的音频播放器组件，具有响应效果和深色主题支持。

打开预览

                <div
  class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900"
>
  <div
    class="w-full max-w-md p-6 rounded-lg shadow-xl bg-white dark:bg-gray-800 transform transition-all duration-300 hover:scale-105"
  >
    <div class="flex items-center justify-between mb-6">
      <div class="text-2xl font-bold text-gray-800 dark:text-gray-200">Now Playing</div>
      <button
        class="p-2 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 6v6m0 0v6m0-6h6m-6 0H6"
          />
        </svg>
      </button>
    </div>
    <div class="flex items-center mb-6">
      <img
        class="w-16 h-16 rounded-md mr-4 object-cover"
        src="https://picsum.photos/id/1011/150/150"
        alt="Album Art"
      />
      <div>
        <div class="text-xl font-semibold text-gray-800 dark:text-gray-200">Song Title</div>
        <div class="text-gray-600 dark:text-gray-400">Artist Name</div>
      </div>
    </div>
    <div class="mb-4">
      <div class="w-full h-2 bg-gray-300 rounded-full mb-2 overflow-hidden">
        <div class="h-full bg-blue-500" style="width: 50%"></div>
      </div>
      <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
        <span>2:30</span>
        <span>4:50</span>
      </div>
    </div>
    <div class="flex items-center justify-center space-x-6">
      <button
        class="p-3 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
          />
        </svg>
      </button>
      <button
        class="p-4 rounded-full bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transform transition-transform duration-200 hover:scale-110"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-8 w-8"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M14.752 11.168l-3.197 2.132A1 1 0 0110 13.803V9.197a1 1 0 011.555-.832l3.197 2.132a1 1 0 010 1.664z"
          />
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      </button>
      <button
        class="p-3 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6 rotate-180"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
          />
        </svg>
      </button>
    </div>
  </div>
</div>

添加到购物车按钮组件

一个为深色模式设计的响应式“添加到购物车”按钮，使用 Tailwind CSS。

打开预览

                <div class="flex items-center justify-center p-10 bg-gray-900 min-h-screen">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <div class="flex items-center">
            <img src="https://picsum.photos/100" alt="Product Image" class="w-16 h-16 rounded-lg mr-4">
            <div class="text-white">
                <h2 class="text-lg font-semibold">Product Name</h2>
                <p class="text-gray-400">Product description goes here.</p>
                <p class="text-xl font-bold mt-2">$29.99</p>
            </div>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200 ease-in-out">
            Add to Cart
        </button>
    </div>
</div>

仪表板组件

一个具有响应式设计和深色模式支持的仪表板组件，使用 Tailwind CSS。

打开预览

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    </div>
  </div>
</div>

列组件

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

打开预览

                <div class="bg-gray-900 text-white p-6">
    <h2 class="text-2xl font-bold mb-4">Columns Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Column 1 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User One</span>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
        </div>
        <!-- Column 2 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User Two</span>
            </div>
            <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        </div>
        <!-- Column 3 -->
        <div class="bg-gray-800 p-4 rounded shadow-lg">
            <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-lg mb-4">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="font-semibold">User Three</span>
            </div>
            <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
        </div>
    </div>
</div>

分页组件

用于深色模式用户界面的分页组件，具有响应效果和深色主题支持。

打开预览

                <nav aria-label="Pagination" class="flex items-center justify-between border-t border-gray-700 px-4 sm:px-0">
  <div class="-mt-px flex w-0 flex-1">
    <a href="#" class="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
      <svg class="mr-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z" clip-rule="evenodd" />
      </svg>
      Previous
    </a>
  </div>
  <div class="hidden md:-mt-px md:flex">
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">1</a>
    <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
    <a href="#" class="inline-flex items-center border-t-2 border-indigo-500 px-4 pt-4 text-sm font-medium text-indigo-600 dark:text-indigo-400" aria-current="page">2</a>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">3</a>
    <span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 dark:text-gray-400">...</span>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">8</a>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">9</a>
    <a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">10</a>
  </div>
  <div class="-mt-px flex w-0 flex-1 justify-end">
    <a href="#" class="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
      Next
      <svg class="ml-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</nav>

图片灯箱组件

一个使用 Tailwind CSS 设计的响应式图片灯箱组件，采用玻璃风格设计。该组件支持深色主题，具有类似雾面玻璃的半透明元素和模糊效果。

打开预览

                <div class="relative">
    <button class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 inline-flex items-center p-2" id="open-lightbox">
        <img src="https://picsum.photos/40/40?random" alt="Thumbnail" class="rounded-full">
    </button>
    <div class="hidden fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="lightbox">
        <div class="flex items-center justify-center h-full">
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg p-4">
                <img src="https://picsum.photos/800/600?random" alt="Lightbox Image" class="rounded-md">
                <button class="mt-4 bg-red-500 dark:bg-red-700 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" id="close-lightbox">Close</button>
            </div>
        </div>
    </div>
</div>

<style>
    /* Lightbox toggle visibility */
    #lightbox:target {
        display: flex;
    }
</style>

导航栏组件

一个具有微交互和深色模式支持的响应式导航栏，使用 Tailwind CSS。

打开预览

                <nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">
        <a href="#" class="hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out">My Website</a>
      </div>
      <div class="hidden md:block">
        <div class="flex items-center space-x-4">
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Home</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">About</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Services</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Contact</a>
        </div>
      </div>
      <div class="md:hidden">
        <button class="text-gray-700 dark:text-white focus:outline-none">
          <svg viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
            <path fill-rule="evenodd" d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

带有野兽派设计的密码重置组件

一个采用野兽派设计的密码重置组件，具有响应式和黑暗主题支持。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-none shadow-none border-4 border-black dark:border-white max-w-md w-full">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-6 text-center tracking-tighter">Reset Your Password</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-sm font-bold text-black dark:text-white mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-3 py-2 border-4 border-black dark:border-white rounded-none bg-gray-200 dark:bg-gray-700 text-black dark:text-white focus:outline-none focus:border-black dark:focus:border-white" required>
      </div>
      <div class="mb-6">
        <button type="submit" class="w-full bg-black dark:bg-white text-white dark:text-black font-bold py-2 px-4 border-4 border-black dark:border-white rounded-none hover:bg-gray-800 dark:hover:bg-gray-200 transition duration-0 ease-linear">Send Reset Link</button>
      </div>
    </form>
    <div class="text-center">
      <p class="text-sm">
        <a href="#" class="text-black dark:text-white hover:underline font-bold">Remember your password?</a>
      </p>
    </div>
  </div>
</div>

1 ... 211 212 213 214 215 ... 242