搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

玻璃质感单色简易工具提示

一个简单、响应迅速、兼容深色模式的工具提示组件，具有 Glassmorphism 风格、单色配色方案，适用于博客和内容网站。

                <div class="relative flex items-center justify-center">
  <button class="text-gray-800 dark:text-gray-200 focus:outline-none">Hover me</button>
  <div class="absolute bottom-full mb-2 hidden px-3 py-2 text-sm font-semibold text-white bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-md shadow-sm dark:bg-gray-800 dark:bg-opacity-20 dark:backdrop-filter dark:backdrop-blur-lg group-hover:block">Tooltip content</div>
</div>

评论区组件

评论部分的组件，具有拟物化设计、三元配色方案、复杂的交互、社交媒体目的、响应式和深色主题支持。

打开预览

                <div
  class="container mx-auto p-4 dark:bg-gray-900 dark:text-white"
>
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Comments</h2>

  <div class="mb-4">
    <textarea
      class="w-full p-2 border border-gray-300 rounded shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
      rows="4"
      placeholder="Add a comment..."
    ></textarea>
    <button
      class="mt-2 px-4 py-2 bg-blue-500 text-white rounded shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800"
    >
      Post Comment
    </button>
  </div>

  <div class="space-y-4">
    <div
      class="bg-white p-4 rounded shadow-lg dark:bg-gray-800 dark:text-white"
    >
      <div class="flex items-center mb-2">
        <img
          class="w-10 h-10 rounded-full mr-4 shadow-md"
          src="https://randomuser.me/api/portraits/men/32.jpg"
          alt="User Avatar"
        />
        <div>
          <h4 class="font-bold dark:text-white">John Doe</h4>
          <p class="text-gray-500 text-sm dark:text-gray-400">2 hours ago</p>
        </div>
      </div>
      <p class="dark:text-white">
        This is a great comment! It provides valuable insights.
      </p>
      <div class="flex items-center mt-4 space-x-4">
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M18 13v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h3.586l1.414 1.414a.996.996 0 001.414 0L10.414 11H14a2 2 0 012 2h2zM5 9.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Like
        </button>
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Reply
        </button>
      </div>
    </div>

    <div
      class="bg-white p-4 rounded shadow-lg dark:bg-gray-800 dark:text-white"
    >
      <div class="flex items-center mb-2">
        <img
          class="w-10 h-10 rounded-full mr-4 shadow-md"
          src="https://randomuser.me/api/portraits/women/44.jpg"
          alt="User Avatar"
        />
        <div>
          <h4 class="font-bold dark:text-white">Jane Smith</h4>
          <p class="text-gray-500 text-sm dark:text-gray-400">1 hour ago</p>
        </div>
      </div>
      <p class="dark:text-white">
        I agree with the previous comment. This is very helpful.
      </p>
      <div class="flex items-center mt-4 space-x-4">
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M18 13v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h3.586l1.414 1.414a.996.996 0 001.414 0L10.414 11H14a2 2 0 012 2h2zM5 9.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Like
        </button>
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Reply
        </button>
      </div>
    </div>
  </div>
</div>

3D下拉菜单组件

一个响应式下拉菜单组件，具有鲜艳的配色方案，专为作品集展示而设计。它具有带有交互元素的 3D 设计，适用于深色模式。

打开预览

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-between items-center w-full rounded-lg border border-transparent shadow-lg px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-medium hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-gradient-to-r from-blue-700 to-purple-700" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Menu
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06 0L10 10.47l3.71-3.26a.75.75 0 111.04 1.14l-4.25 3.67a.75.75 0 01-1.04 0l-4.25-3.67a.75.75 0 010-1.14z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="absolute right-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">Portfolio Item 1</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">Portfolio Item 2</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">Portfolio Item 3</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">Portfolio Item 4</a>
    </div>
  </div>
</div>

警报消息组件

一个响应式警报消息组件，采用简约/扁平风格设计，采用柔和的配色方案，适用于社交媒体界面，包含深色主题支持。

打开预览

                <div class="max-w-md mx-auto mt-5">
    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h2 class="text-gray-800 dark:text-white text-lg font-medium">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-300 text-sm">Just now</p>
            </div>
        </div>
        <div class="p-4">
            <p class="text-gray-800 dark:text-gray-300">This is a simple alert message for your social media interface.</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden mt-4">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h2 class="text-gray-800 dark:text-white text-lg font-medium">Jane Smith</h2>
                <p class="text-gray-600 dark:text-gray-300 text-sm">5 minutes ago</p>
            </div>
        </div>
        <div class="p-4">
            <p class="text-gray-800 dark:text-gray-300">Another alert message from the social networking interface!</p>
        </div>
    </div>
</div>

价格显示组件

仪表板的响应式价格显示组件，具有引人入胜的微交互和三元配色方案，并支持深色模式。

打开预览

                <div class="flex flex-col items-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
  <div class="flex items-center space-x-4">
    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-4 border-indigo-500 dark:border-teal-400 transition-all duration-300 ease-in-out hover:shadow-lg"/>
    <div class="flex flex-col">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Price Display</h2>
      <p class="text-sm text-gray-500 dark:text-gray-400">An example of a price display component.</p>
    </div>
  </div>
  <div class="mt-4 p-4 bg-white dark:bg-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:bg-indigo-200 dark:hover:bg-teal-500">
    <h3 class="text-xl font-bold text-indigo-600 dark:text-teal-300">$99.99</h3>
    <p class="text-sm text-gray-600 dark:text-gray-300">Special Sale Price</p>
    <div class="mt-2 flex justify-between items-center">
      <button class="px-4 py-2 bg-indigo-500 text-white rounded-md shadow-md transform transition-transform hover:scale-105 hover:bg-indigo-600 dark:bg-teal-500 dark:hover:bg-teal-600">Buy Now</button>
      <button class="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md transition-all duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-500">Details</button>
    </div>
  </div>
</div>

卡片组件

一个响应式博客/内容卡组件，采用拟物化样式和大地色调设计。包括标题、图像、简要描述和用于作者信息的头像。支持深色模式。

打开预览

                <div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg space-y-4">
    <div class="bg-green-200 dark:bg-green-700 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover">
    </div>
    <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the blog post. It provides a summary of the content and encourages users to read more.</p>
    </div>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
        <div class="text-gray-800 dark:text-gray-200">
            <p class="font-semibold">Author Name</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Date Published</p>
        </div>
    </div>
</div>

错误消息组件

一个响应式错误消息组件，专为具有单色配色方案的深色模式而设计。它旨在使仪表板可视化错误或警告，其中包含交互式元素，例如关闭按钮和错误图标。

打开预览

                <div class="bg-gray-800 text-gray-200 p-4 rounded-lg space-y-4">
    <h2 class="text-xl font-semibold mb-2">Error Messages</h2>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Unable to load data</p>
            <p class="text-gray-400">Details: The data could not be retrieved at this time. Please try again later.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Network issue</p>
            <p class="text-gray-400">Details: Please check your internet connection and try again.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Database connection failed</p>
            <p class="text-gray-400">Details: The application is unable to connect to the database server.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Unexpected error occurred</p>
            <p class="text-gray-400">Details: Please refresh the page or contact support.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Authentication failed</p>
            <p class="text-gray-400">Details: Invalid username or password. Please try again.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
</div>

点赞/反应按钮组件

专为企业网站设计的复古/复古 Like/Reaction 按钮组件，具有大地色调和响应式设计，并支持深色模式。

打开预览

                <div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-brown-800 dark:text-brown-300 mb-4">
        Share Your Reaction!
    </h2>
    <div class="flex space-x-4">
        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1005/50/50" alt="Like" class="mb-1 rounded-full" />
            <span>👍 Like</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1006/50/50" alt="Love" class="mb-1 rounded-full" />
            <span>❤️ Love</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1007/50/50" alt="Haha" class="mb-1 rounded-full" />
            <span>😂 Haha</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1008/50/50" alt="Wow" class="mb-1 rounded-full" />
            <span>😮 Wow</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1009/50/50" alt="Sad" class="mb-1 rounded-full" />
            <span>😢 Sad</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1010/50/50" alt="Angry" class="mb-1 rounded-full" />
            <span>😠 Angry</span>
        </button>
    </div>
</div>

复古评分系统组件

用于电子商务的简单复古风格评级系统组件，使用 Tailwind CSS 提供鲜艳的色彩和深色主题支持。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-1 text-2xl">
    <!-- Star 1 -->
    <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
    <!-- Star 2 -->
    <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
    <!-- Star 3 -->
    <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
    <!-- Star 4 -->
    <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
    <!-- Star 5 (empty) -->
    <svg class="w-8 h-8 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
  </div>
</div>

粗犷风格社交媒体导航

一个响应式导航组件，采用野兽派风格，适用于社交媒体应用程序，采用互补的配色方案和最少的元素。

打开预览

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 flex justify-between items-center">
    <div class="flex items-center space-x-4">
        <a href="#" class="text-white dark:text-gray-200 font-bold text-lg">Logo</a>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a></li>
        </ul>
    </div>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
        <a href="#" class="text-white dark:text-gray-200 font-bold">Logout</a>
    </div>
</nav>
<div class="bg-gray-100 dark:bg-gray-800 p-8">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome to Our Social Media</h1>
    <img src="https://picsum.photos/800/400" alt="Random Image" class="rounded-lg shadow-lg">
</div>

1 ... 167 168 169 170 171 ... 315