类别

所有组件

浏览所有可用的 Tailwind CSS 组件

徽章组件

一个具有 3D 设计的响应式徽章组件，具有深度和支持深色主题。每个徽章代表一个用户，包含名字、图像和描述，使用 Tailwind CSS 设计。

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
    <!-- Badge 1 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
        <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
    </div>
    <!-- Badge 2 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
        <p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
    </div>
    <!-- Badge 3 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Michael Johnson</h4>
        <p class="text-gray-600 dark:text-gray-400">Product Manager</p>
    </div>
    <!-- Badge 4 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sarah Connor</h4>
        <p class="text-gray-600 dark:text-gray-400">UI/UX Designer</p>
    </div>
    <!-- Badge 5 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">David Lee</h4>
        <p class="text-gray-600 dark:text-gray-400">Content Writer</p>
    </div>
    <!-- Badge 6 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Emily Davis</h4>
        <p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
    </div>
</div>

数据可视化组件

一个以粗野主义风格设计的数据可视化组件，使用 Tailwind CSS，具有响应式布局和支持深色主题。

打开预览

                <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Data Visualization</h2>
    <div class="flex flex-col md:flex-row space-x-0 md:space-x-4 space-y-4 md:space-y-0">
        <div class="w-full md:w-1/2 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Bar Chart</h3>
            <img src="https://picsum.photos/400/200?random=1" alt="Bar Chart Placeholder" class="w-full h-auto rounded-lg">
        </div>
        <div class="w-full md:w-1/2 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Pie Chart</h3>
            <img src="https://picsum.photos/400/200?random=2" alt="Pie Chart Placeholder" class="w-full h-auto rounded-lg">
        </div>
    </div>
    <div class="mt-4 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">User Statistics</h3>
        <div class="flex flex-wrap items-center space-x-4">
            <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">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 1</span>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 2</span>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 3</span>
            </div>
        </div>
    </div>
</div>

数据可视化组件

一个响应式数据可视化组件，具有 3D 设计元素，支持深色主题。

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center py-10">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden transform transition-all hover:scale-105 hover:shadow-2xl">
    <div class="p-6">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Sales Data Visualization</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
        <div class="bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg p-4 flex flex-col items-center shadow-lg">
          <h3 class="text-xl text-white font-medium">Monthly Sales</h3>
          <img class="rounded-lg mt-2" src="https://picsum.photos/300/200?random=1" alt="Sales Chart">
          <p class="text-white mt-2">Total Sales: $15,000</p>
        </div>
        <div class="bg-gradient-to-br from-green-400 to-green-600 rounded-lg p-4 flex flex-col items-center shadow-lg">
          <h3 class="text-xl text-white font-medium">User Growth</h3>
          <img class="rounded-lg mt-2" src="https://picsum.photos/300/200?random=2" alt="User Growth Chart">
          <p class="text-white mt-2">New Users: 500</p>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-6">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Team Members</h2>
      <div class="flex justify-around mt-4">
        <div class="flex flex-col items-center">
          <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1">
          <p class="text-sm text-gray-700 dark:text-gray-300">John Doe</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Sales Manager</p>
        </div>
        <div class="flex flex-col items-center">
          <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 2">
          <p class="text-sm text-gray-700 dark:text-gray-300">Jane Smith</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Data Analyst</p>
        </div>
      </div>
    </div>
  </div>
</div>

社交组件

一个采用拟物化风格设计的社交组件部分，具有响应效果和支持深色主题。

打开预览

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto flex flex-col items-center">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Connect with Us</h2>
    <div class="flex flex-row space-x-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=1" alt="Facebook" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Facebook</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Facebook.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=2" alt="Twitter" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Twitter</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Twitter.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=3" alt="Instagram" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Instagram</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Instagram.</p>
        </div>
    </div>
    <div class="mt-6 flex flex-col items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-16 h-16 mb-2">
        <h4 class="font-semibold text-gray-800 dark:text-white">John Doe</h4>
        <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
    </div>
</div>

产品评论组件

一个展示产品用户评价的网页组件，采用微交互设计，使用 Tailwind CSS 支持深色主题。

打开预览

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Product Reviews</h2>
        <div class="space-y-4">
            <!-- Review Item -->
            <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
                <div class="flex items-center mb-2">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-300">5 stars</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">2 days ago</span>
            </div>
            <!-- Review Item -->
            <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
                <div class="flex items-center mb-2">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-300">4 stars</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-gray-300">Praesent nec nisl a purus blandit viverra. Proin nunc est, faucibus ut, ullamcorper id, dapibus id, sapien.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">5 days ago</span>
            </div>
            <!-- Review Item -->
            <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
                <div class="flex items-center mb-2">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Michael Johnson</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-300">3 stars</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-gray-300">Curabitur bibendum, felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">1 week ago</span>
            </div>
        </div>
    </div>
</div>

信息图组件

一个极简的信息图组件，拥有干净的空间和极少的元素，支持响应式设计和深色主题。

打开预览

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Infographics Title</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 1</p>
        </div>
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 2</p>
        </div>
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 3</p>
        </div>
    </div>
    <div class="mt-6 border-t pt-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Additional Insights</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <p class="text-gray-600 dark:text-gray-400">This is an additional insight provided by User</p>
        </div>
    </div>
</div>

双因素认证组件

一个简单干净的双因素认证组件设计，使用 Tailwind CSS，具有响应效果和支持深色主题。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-96">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Two-Factor Authentication</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please enter the code sent to your email.</p>
    <div class="mb-4">
      <input type="text" placeholder="Enter your code" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600" />
    </div>
    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">Verify</button>
    <div class="flex items-center justify-between mt-6">
      <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Resend Code</a>
      <a href="#" class="text-gray-500 dark:text-gray-400 hover:underline">Need Help?</a>
    </div>
    <div class="flex items-center justify-center mt-6">
      <img src="https://picsum.photos/50/50" alt="Placeholder Image" class="rounded-full shadow-md" />
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full shadow-md ml-2" />
    </div>
  </div>
</div>

视频播放器组件

一个响应式视频播放器组件，采用拟物化风格，使用 Tailwind CSS。它支持深色模式，具有微妙的阴影效果，使 UI 看起来柔和。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 max-w-lg w-full">
        <div class="flex justify-center mb-4">
            <video class="rounded-lg shadow-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="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div class="text-sm">
                <p class="text-gray-900 dark:text-white font-medium">John Doe</p>
                <p class="text-gray-500 dark:text-gray-300">Uploaded 2 days ago</p>
            </div>
        </div>
        <div class="mt-4">
            <p class="text-gray-800 dark:text-gray-300">A brief description of the video content goes here. It can detail key points or the overall theme of the video.</p>
        </div>
    </div>
</div>

大菜单组件

一个响应式的大型菜单组件，采用玻璃拟态风格，具有磨砂玻璃般的半透明元素和模糊效果，使用 Tailwind CSS 支持深色主题。

打开预览

                <div class="relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
    <div class="absolute inset-0 bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 backdrop-blur-md"></div>
    <nav class="relative z-10">
        <div class="container mx-auto px-4 py-6">
            <div class="flex justify-between items-center">
                <div class="text-2xl font-bold text-gray-800 dark:text-white">Brand</div>
                <div class="hidden lg:flex space-x-8">
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Home</a>
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">About</a>
                    <div class="relative group">
                        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Services</a>
                        <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 rounded-lg shadow-lg group-hover:block">
                            <div class="p-4">
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Web Design</a>
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">SEO Services</a>
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Marketing</a>
                            </div>
                        </div>
                    </div>
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Contact</a>
                </div>
                <div class="lg:hidden">
                    <button class="text-gray-800 dark:text-white focus:outline-none">
                        <svg class="w-6 h-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"/></svg>
                    </button>
                </div>
            </div>
        </div>
    </nav>
    <div class="hidden lg:block relative overflow-hidden">
        <img class="object-cover w-full h-64 opacity-50" src="https://picsum.photos/800/400" alt="Mega Menu Background">
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 p-6 rounded-lg shadow-lg">
                <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to Our Services</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Explore our range of services tailored for your business needs.</p>
                <a href="#" class="mt-4 inline-block bg-blue-500 text-white font-bold py-2 px-4 rounded-lg shadow hover:bg-blue-600">Get Started</a>
            </div>
        </div>
    </div>
    <footer class="text-center py-4 bg-gray-200 dark:bg-gray-700">
        <p class="text-gray-800 dark:text-white">© 2023 My Company</p>
    </footer>
</div>

双因素认证组件

一个设计有微交互的双因素认证组件，使用 Tailwind CSS 设计，具备响应效果和暗黑主题支持。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-4">Two-Factor Authentication</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter the code sent to your registered mobile number.</p>
        <div class="flex flex-col items-center">
            <input type="text" placeholder="Enter your code" class="w-full p-3 rounded border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all mb-4"/>
        </div>
        <div class="flex items-center justify-between mb-4">
            <button class="transition-transform transform hover:scale-105 bg-blue-500 text-white p-3 rounded-lg shadow-md hover:shadow-lg focus:ring-2 focus:ring-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500 dark:focus:ring-blue-300">Verify</button>
            <button class="text-blue-500 hover:underline dark:text-blue-400">Resend Code</button>
        </div>
        <hr class="my-4 border-gray-300 dark:border-gray-700"/>
        <div class="text-center">
            <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full mx-auto mb-2"/>
            <span class="text-gray-600 dark:text-gray-400">User's Name</span>
        </div>
    </div>
</div>

1 ... 262 263 264 265 266 ... 282