类别

所有组件

浏览所有可用的 Tailwind CSS 组件

OAuth按钮组件

复古/经典/80年代/90年代主题的OAuth按钮组件，具有相似色配色方案，适中复杂性，适用于社交媒体，响应式设计，支持暗黑模式。不需要JavaScript，仅使用Tailwind类的HTML。

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Connect with:</h2>
    <div class="space-y-4">
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M6.29 18.29c-.89 0-1.6-.72-1.6-1.6V3.31c0-.89.72-1.6 1.6-1.6h7.42c.89 0 1.6.72 1.6 1.6v13.38c0 .89-.72 1.6-1.6 1.6H6.29zm0-14.78v13.38h7.42V3.51H6.29zM10 14.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
        </svg>
        Sign in with Google
      </button>
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M18 3.001A1.997 1.997 0 0016 2c-1.1 0-2 .9-2 2v1h-3V4c0-1.1-.9-2-2-2S7 2.9 7 4v1H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h3v-1c0-1.1.9-2 2-2s2 .9 2 2v1h3c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3V4c0-1.1.9-2 2-2s2 .9 2 2v1h-3V4c0-1.1-.9-2-2-2S7 2.9 7 4v1h-3V4c0-1.1-.9-2-2-2S2 2.9 2 4v3h1c1.1 0 2 .9 2 2s-.9 2-2 2H2v3h1c1.1 0 2 .9 2 2s-.9 2-2 2H2v1h3c1.1 0 2-.9 2-2s.9-2 2-2v1h3c1.1 0 2-.9 2-2s-.9-2-2-2v1h3c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3z"/>
        </svg>
        Sign in with Twitter
      </button>
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10 0C4.477 0 0 4.477 0 10c0 4.991 3.643 9.185 8.438 9.87a.866.866 0 00.502-.5c.136-.97-.06-2.014-.11-2.355-.058-.387-.267-1.178 0-2.013.262-.834 1.496-.53 1.496-.53.636.443 1.486.67 2.021.96.535.289.774.85.774 1.62 0 1.18-.854 2.567-2.2 2.978-.356.105-.704.156-1.052.156-.983 0-1.94-.344-2.797-.98-1.627-1.203-2.103-3.31-.56-5.04 1.542-1.73 3.982-2.25 5.513-.97.333.27.643.616.92 1.01-.283.13-.572.248-.85.368-.578.248-1.19-.092-1.546-.408-.2.4-.55.76-.953 1.05-.5.36-1.073.59-1.642.64-.568.05-1.12-.093-1.56-.378-.44-.286-.68-1.043-.46-1.57.22-.524.87-.877 1.35-.877.642 0 1.195.21 1.66.612.464.403.783.97.953 1.57.17.6.217 1.216.147 1.838-.07.62.017 1.24-.116 1.85-.93 4.66-3.75 6.89-8.562 6.89-5.523 0-10-4.477-10-10z"/>
        </svg>
        Sign in with GitHub
      </button>
    </div>
  </div>
</div>

社交媒体数据表单色3D简单

一个简单的单色3D设计数据表组件，适用于支持暗黑主题的社交媒体界面。

打开预览

                <div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg shadow-lg overflow-hidden">  <div class="overflow-x-auto">    <table class="min-w-full bg-gray-300 dark:bg-gray-700 rounded-lg">      <thead>        <tr class="bg-gray-400 dark:bg-gray-600 text-gray-800 dark:text-gray-200 uppercase text-sm leading-normal">          <th class="py-3 px-6 text-left">User</th>          <th class="py-3 px-6 text-left">Activity</th>          <th class="py-3 px-6 text-center">Likes</th>          <th class="py-3 px-6 text-center">Comments</th>        </tr>      </thead>      <tbody class="text-gray-800 dark:text-gray-200 text-sm font-light">        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"/>              </div>              <span>John Doe</span>            </div>          </td>          <td class="py-3 px-6 text-left">Posted a photo</td>          <td class="py-3 px-6 text-center">125</td>          <td class="py-3 px-6 text-center">36</td>        </tr>        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar"/>              </div>              <span>Jane Smith</span>            </div>          </td>          <td class="py-3 px-6 text-left">Commented on a post</td>          <td class="py-3 px-6 text-center">88</td>          <td class="py-3 px-6 text-center">12</td>        </tr>        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar"/>              </div>              <span>Peter Jones</span>            </div>          </td>          <td class="py-3 px-6 text-left">Shared a link</td>          <td class="py-3 px-6 text-center">54</td>          <td class="py-3 px-6 text-center">7</td>        </tr>        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar"/>              </div>              <span>Mary Williams</span>            </div>          </td>          <td class="py-3 px-6 text-left">Liked a photo</td>          <td class="py-3 px-6 text-center">201</td>          <td class="py-3 px-6 text-center">45</td>        </tr>      </tbody>    </table>  </div></div>

图片灯箱组件

极简图像灯箱组件，具有响应式设计和暗黑主题支持，供仪表盘使用。使用picsum.photos作为图片。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    <!-- Image 1 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/1/300/200" alt="Image 1" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/2/300/200" alt="Image 2" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/3/300/200" alt="Image 3" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 4 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/4/300/200" alt="Image 4" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>
  </div>

  <!-- Lightbox Overlay (hidden by default) -->
  <div id="lightbox-overlay" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 hidden">
    <div class="relative">
      <img id="lightbox-image" src="" alt="Lightbox Image" class="max-w-3xl max-h-screen">
      <button id="close-lightbox" class="absolute top-4 right-4 text-white text-2xl font-bold">&times;</button>
    </div>
  </div>
</div>

页脚组件

响应式底部组件，采用拟物风格，地球色调配色方案，支持暗黑主题，专为社交媒体设计。

打开预览

                <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Component</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 dark:bg-gray-900">

<footer class="bg-gradient-to-b from-yellow-800 to-yellow-900 text-gray-200 py-8 dark:from-gray-800 dark:to-gray-900">
  <div class="container mx-auto px-4 flex flex-col items-center">

    <!-- Social Media Links (Skeuomorphism style) -->
    <div class="flex space-x-6 mb-6">
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Facebook
      </a>
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Twitter
      </a>
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Instagram
      </a>
    </div>

    <!-- Copyright Information -->
    <p class="text-sm text-gray-400 dark:text-gray-600">& Animations Copyright &copy; 2023 Your Company. All rights reserved.</p>

  </div>
</footer>

</body>
</html>

评论区

一个响应式、兼容暗黑主题的电子商务评论部分组件，采用极简/扁平设计，三原色配色方案和复杂的交互元素，使用Tailwind CSS构建。使用picsum.photos和randomuser.me作为演示图像。

打开预览

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

  </div>

评论区组件

带有拟物设计、三原色配色方案以及适中复杂性的评论部分组件，使用Tailwind CSS实现，具有响应式设计和暗黑主题支持。

打开预览

                
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comments Section</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .neumorphism {
            box-shadow: 5px 5px 10px #cbced1, -5px -5px 10px #ffffff;
        }
        .dark .neumorphism {
            box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #333333;
        }
        .neumorphism-inset {
            box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
        }
        .dark .neumorphism-inset {
            box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #333333;
        }
    </style>
</head>
<body class="bg-gray-200 dark:bg-gray-800 transition duration-300">
    <div class="container mx-auto p-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-6 neumorphism transition duration-300">
            <h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-white">Comments</h2>

            <!-- Comment Input -->
            <div class="mb-6">
                <textarea class="w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white neumorphism-inset focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 transition duration-300" rows="4" placeholder="Add a comment..."></textarea>
                <button class="mt-3 w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 neumorphism transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Post Comment</button>
            </div>

            <!-- Comment List -->
            <div class="space-y-4">
                <!-- Single Comment -->
                <div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg neumorphism transition duration-300">
                    <div class="flex items-start space-x-4">
                        <img class="w-10 h-10 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
                        <div class="flex-1">
                            <div class="flex justify-between items-center">
                                <span class="font-semibold text-gray-800 dark:text-white">Sarah Johnson</span>
                                <span class="text-sm text-gray-500 dark:text-gray-300">2 hours ago</span>
                            </div>
                            <p class="text-gray-700 dark:text-gray-200 mt-1">This is a great post! Very informative.</p>
                            <div class="flex space-x-4 mt-3">
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Single Comment -->
                <div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg neumorphism transition duration-300">
                    <div class="flex items-start space-x-4">
                        <img class="w-10 h-10 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/men/76.jpg" alt="User Avatar">
                        <div class="flex-1">
                            <div class="flex justify-between items-center">
                                <span class="font-semibold text-gray-800 dark:text-white">David Miller</span>
                                <span class="text-sm text-gray-500 dark:text-gray-300">1 hour ago</span>
                            </div>
                            <p class="text-gray-700 dark:text-gray-200 mt-1">I agree! Looking forward to more content like this.</p>
                             <div class="flex space-x-4 mt-3">
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                 <!-- Reply Example -->
                 <div class="ml-14 bg-gray-200 dark:bg-gray-700 p-4 rounded-lg neumorphism transition duration-300">
                    <div class="flex items-start space-x-4">
                        <img class="w-8 h-8 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
                        <div class="flex-1">
                            <div class="flex justify-between items-center">
                                <span class="font-semibold text-gray-800 dark:text-white">Emily Clark</span>
                                <span class="text-sm text-gray-500 dark:text-gray-300">45 minutes ago</span>
                            </div>
                            <p class="text-gray-700 dark:text-gray-200 mt-1">Thanks David! Glad you liked it.</p>
                             <div class="flex space-x-4 mt-3">
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>

拟态360查看器组件

一个360°的查看器组件，采用拟物设计，三原色配色方案（例如：浅蓝色、粉色、黄橙色），适用于社交媒体应用，复杂度适中。该组件是响应式的，支持使用Tailwind类的暗黑模式，并使用picsum.photos作为图片和randomuser.me作为头像。不需要JavaScript。

打开预览

                <div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">

  <!-- Neumorphic Container -->
  <div class="relative w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl shadow-xl p-6
              dark:shadow-[7px_7px_15px_#1c1c1c,-7px_-7px_15px_#343434]
              shadow-[7px_7px_15px_#a3a3a3,-7px_-7px_15px_#ffffff] md:max-w-md">

    <!-- 360 Viewer Placeholder (using an image for demonstration) -->
    <!-- In a real application, this would be a canvas or iframe with a 360 viewer library -->
    <div class="relative w-full h-64 rounded-lg overflow-hidden
                shadow-inner dark:shadow-[inset_5px_5px_10px_#1c1c1c,inset_-5px_-5px_10px_#343434]
                shadow-[inset_5px_5px_10px_#a3a3a3,inset_-5px_-5px_10px_#ffffff]">
      <img src="https://picsum.photos/600/400" alt="360 View Placeholder" class="w-full h-full object-cover">
      <!-- Example Triadic Colors for potential UI elements layered over the image -->
      <div class="absolute top-2 right-2 w-8 h-8 bg-blue-400 dark:bg-blue-600 rounded-full opacity-75"></div>
      <div class="absolute bottom-2 left-2 w-8 h-8 bg-pink-400 dark:bg-pink-600 rounded-full opacity-75"></div>
      <div class="absolute bottom-2 right-2 w-8 h-8 bg-yellow-500 dark:bg-yellow-700 rounded-full opacity-75"></div>
    </div>

    <!-- Component Title -->
    <div class="mt-6 text-center text-gray-700 dark:text-gray-300 text-xl font-semibold">
      Interactive 360° View
    </div>

    <!-- User Avatar and Info -->
    <div class="flex items-center justify-center mt-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-600">
      <div class="ml-3 text-gray-600 dark:text-gray-400">
        <p class="font-medium">John Doe</p>
        <p class="text-sm">Exploring the view</p>
      </div>
    </div>

    <!-- Interactive Buttons Placeholder -->
    <div class="flex justify-around mt-6">
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
                     shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
                     shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
                     text-gray-700 dark:text-gray-300 hover:shadow-inner
                     dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
                     hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
                     transition duration-200">
        <!-- Example Icon - Replace with a real icon -->
        <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="M15 10l4.555-4.555A1.5 1.5 0 0017.444 ..."/>
        </svg>
      </button>
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
                     shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
                     shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
                     text-gray-700 dark:text-gray-300 hover:shadow-inner
                     dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
                     hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
                     transition duration-200">
        <!-- Example Icon - Replace with a real icon -->
        <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>

</div>

头部组件

带有3D设计、粉彩色调、复杂性的Tailwind头部组件，适用于仪表盘，响应式设计，并支持暗黑主题。

打开预览

                <header class="relative w-full py-4 dark:bg-gray-800">
  <div class="container mx-auto flex justify-between items-center px-4">
    <div class="text-2xl font-bold text-gray-800 dark:text-white relative">
      Dashboard
      <span class="absolute top-0 right-0 transform translate-x-1 -translate-y-1 w-3 h-3 bg-purple-300 rounded-full animate-ping"></span>
      <span class="absolute top-0 right-0 transform translate-x-1 -translate-y-1 w-3 h-3 bg-purple-500 rounded-full"></span>
    </div>
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Overview</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
    </nav>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-400 transition duration-300 ease-in-out">
        <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-600 dark:text-gray-300">
          <svg class="h-5 w-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </span>
      </div>
      <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-purple-200 dark:hover:bg-purple-600 transition duration-300 ease-in-out">
        <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 0a6 6 0 00-6 0m6 0h-6"></path></svg>
      </button>
      <img class="h-10 w-10 rounded-full border-2 border-purple-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    </div>
    <button class="md:hidden text-gray-600 dark:text-gray-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="M4 6h16M4 12h16M4 18h16"></path></svg>
    </button>
  </div>
</header>

加载器组件

一个简单的加载器组件，专为使用单色配色方案的深色模式社交媒体界面设计。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="flex">
        <div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce mr-4"></div>
        <div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce"></div>
    </div>
    <div class="flex flex-col items-center ml-4">
        <h2 class="text-gray-200 dark:text-gray-100 text-xl mb-2">Loading...</h2>
        <div class="flex space-x-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
        </div>
    </div>
</div>
<style>
    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-15px);
        }
    }
</style>

加载器组件

一个针对博客或内容网站设计的加载组件，采用拟物风格和三元色彩方案。它具有适合内容消费的简单布局，并包含深色模式支持。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="loader">
        <div class="rounded-lg border-4 border-blue-500 dark:border-blue-300 h-16 w-16 animate-spin"></div>
        <div class="mt-5 text-center">
            <img class="rounded-full h-12 w-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" />
            <div class="text-lg font-bold text-gray-800 dark:text-gray-200">Loading Content...</div>
        </div>
    </div>
</div>
<style>
    .loader {
        background: linear-gradient(145deg, #e6e6e6, #f0f0f0);
        border-radius: 15px;
        box-shadow: 20px 20px 60px #d1d1d1,
                    -20px -20px 60px #ffffff;
        padding: 20px;
    }
</style>

1 ... 116 117 118 119 120 ... 242