搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

容器组件

一个简单的响应式仪表板容器，具有吸引人的微交互和暗主题，专注于类比色调。

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-blue-200 dark:bg-blue-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-blue-700 dark:text-blue-300">User Profile</span>
            </div>
            <img src="https://picsum.photos/300/200?random=1" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-green-200 dark:bg-green-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-green-700 dark:text-green-300">Analytics</span>
            </div>
            <img src="https://picsum.photos/300/200?random=2" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-red-200 dark:bg-red-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-red-700 dark:text-red-300">Notifications</span>
            </div>
            <img src="https://picsum.photos/300/200?random=3" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-yellow-700 dark:text-yellow-300">Settings</span>
            </div>
            <img src="https://picsum.photos/300/200?random=4" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
    </div>
</div>

评分系统组件

一个响应式网页组件，用于对物品进行评分，具备拟物化设计，仿照现实世界对应物。适合在作品集展示工作或产品。

打开预览

                <div class="max-w-lg mx-auto p-4 bg-gray-800 text-white rounded-lg shadow-lg dark:bg-gray-900">
    <h2 class="text-xl font-bold mb-4">Rating System</h2>
    <div class="flex items-center mb-6">
        <img src="https://picsum.photos/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md mr-4" />
        <div>
            <h3 class="text-lg font-semibold">Product Name</h3>
            <p class="text-gray-400">Product description goes here.</p>
            <div class="flex items-center mt-2">
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-500">(3/5)</span>
            </div>
        </div>
    </div>
    <h4 class="text-md font-semibold mb-3">User Reviews</h4>
    <div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
            <span class="font-bold">John Doe</span>
            <span class="text-gray-400 ml-2">5 hours ago</span>
        </div>
        <p class="text-gray-300">This product is amazing! Highly recommend it to everyone.</p>
    </div>
    <div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
            <span class="font-bold">Jane Smith</span>
            <span class="text-gray-400 ml-2">3 hours ago</span>
        </div>
        <p class="text-gray-300">Not what I expected, but decent quality overall.</p>
    </div>
    <div class="flex items-center justify-between mt-4">
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded shadow">Rate Product</button>
        <button class="bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded shadow">Report</button>
    </div>
</div>

视频播放器组件

适用于电子商务的极简/扁平化设计视频播放器组件，响应式设计，支持暗主题。

打开预览

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
  <div class="relative">
    <video controls class="w-full">
      <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="p-4">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title</h3>
    <p class="text-gray-600 dark:text-gray-300 text-sm mt-1">Brief product description goes here.</p>
    <div class="flex justify-between items-center mt-4">
      <span class="text-lg font-bold text-gray-900 dark:text-white">$99.99</span>
      <button class="px-3 py-1 bg-blue-500 text-white text-xs font-bold uppercase rounded dark:bg-blue-700">Add to Cart</button>
    </div>
  </div>
</div>

玻璃态进度条

一款玻璃形态风格的进度条，专为社交媒体界面设计，特色鲜艳色彩并支持暗模式。布局简单，无需JavaScript。

打开预览

                <div class="w-full bg-gray-200 bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full h-4 dark:bg-gray-700 dark:bg-opacity-20 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 h-4 rounded-full" style="width: 75%;"></div>
</div>

吐司通知组件

一个采用玻璃形态风格的吐司通知组件，使用柔和色彩，专为博客和内容消费设计。支持暗模式，界面丰富，包含互动元素。

打开预览

                <div class="fixed bottom-5 right-5 z-50 space-y-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notification Title</h4>
        <p class="text-gray-600 dark:text-gray-400">This is a brief message for a toast notification.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">5 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Notification</h4>
        <p class="text-gray-600 dark:text-gray-400">Here is another message for your consideration.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">10 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Important Alert</h4>
        <p class="text-gray-600 dark:text-gray-400">This is an important alert that requires your attention.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">15 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>
</div>

拟物化社交媒体导航栏

拟物化的社交媒体导航栏，采用三元色调和适度复杂性。

打开预览

                <nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 shadow-lg dark:shadow-[0_20px_50px_rgba(0,_0,_0,_0.6)] p-4 rounded-b-xl">
  <div class="container mx-auto flex items-center justify-between">
    <div class="flex items-center space-x-4">
      <a href="#" class="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">
        <svg class="h-8 w-8" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2.343 2.343a1 1 0 01-1.414 0L11.5 11.5m-4 4L7 10m3.75 3.75V17m-5 0h5"></path></svg>
        <span class="font-bold text-xl">SocialApp</span>
      </a>
    </div>
    <div class="flex items-center space-x-6">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-300 relative">
        <svg class="h-6 w-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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 01-6 0v-1m6 0H9"></path></svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">
        <svg class="h-6 w-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.004 9.004 0 01-7.504-4.588M3.05 5.84C3.05 5.84 6.893 19 12 19s8.95-13.16 8.95-13.16"></path></svg>
      </a>
      <div class="relative">
        <button class="relative z-10 block h-10 w-10 rounded-full overflow-hidden border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-white">
          <img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Your avatar">
        </button>
      </div>
    </div>
  </div>
</nav>

360° 观看器组件

一个简单的360°查看器组件，采用玻璃形态风格和响应式设计，支持暗模式。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="relative w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30">
        <div class="p-6">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">360° Viewer</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-300">Explore the item from all angles with our 360° viewer. Use your mouse or finger to rotate.</p>
        </div>
        <div class="flex justify-center">
            <img src="https://picsum.photos/600/400?random=1" alt="360° View" class="w-full h-auto rounded-b-lg">
        </div>
        <div class="flex items-center justify-around p-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
        </div>
    </div>
</div>

媒体嵌入组件

一个响应式媒体嵌入组件，支持暗主题，适用于博客/内容网站，遵循材料设计原则，采用三元色调和适度复杂性。包括一个嵌入视频占位符和相关文章链接。

打开预览

                <div class="container mx-auto p-4 max-w-3xl">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="relative" style="padding-top: 56.25%;">
      <!-- 16:9 Aspect Ratio -->
      <iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Embedded Media Title</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Published on October 27, 2023</p>
      <p class="text-gray-700 dark:text-gray-200 mb-4">This is a description of the embedded media content. It provides context and information about the video.</p>
      <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Related Articles</h3>
        <ul>
          <li class="mb-2">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 1</a>
          </li>
          <li class="mb-2">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 2</a>
          </li>
          <li>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 3</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

拟物化社交媒体超大菜单

具备拟物化设计的超级菜单组件，采用三元色调和简单复杂度，旨在社交媒体用途。支持暗主题的响应式设计。

打开预览

                <nav class="bg-gray-200 dark:bg-gray-800 shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <div class="text-gray-800 dark:text-white text-xl font-bold">SocialHub</div>
      <div class="hidden md:flex space-x-6">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Feed</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-300">Profile</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-300">Messages</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-300">Notifications</a>
      </div>
      <div class="md:hidden">
        <button class="text-gray-700 dark:text-gray-300 focus:outline-none">
          <svg class="h-6 w-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"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>

热图组件

一个简单的响应式热图组件，采用复古/怀旧美学，使用淡色调色方案，适合仪表板。具有Tailwind CSS的深色主题支持。

打开预览

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-pink-600 dark:text-pink-300">Heat Map</h2>

    <div class="mt-4 grid grid-cols-3 gap-2">
        <div class="bg-blue-300 dark:bg-blue-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/100/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-green-300 dark:bg-green-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/101/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-yellow-300 dark:bg-yellow-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/102/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-pink-300 dark:bg-pink-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/103/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-purple-300 dark:bg-purple-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/104/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
        <div class="bg-red-300 dark:bg-red-700 h-24 rounded-lg flex items-center justify-center">
            <img src="https://picsum.photos/105/100" alt="Sample Image" class="rounded-full border-4 border-white">
        </div>
    </div>

    <div class="mt-4 flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-4 border-white">
            <span class="ml-2 text-gray-700 dark:text-gray-300">User: John Doe</span>
        </div>
        <button class="bg-pink-500 dark:bg-pink-600 text-white font-semibold py-2 px-4 rounded">Action</button>
    </div>
</div>

1 ... 239 240 241 242 243 ... 335