类别

所有组件

浏览所有可用的 Tailwind CSS 组件

热力图组件

一个采⽤玻璃形变风格设计的热图组件，以大地色为主。布局简单，由基本元素组成，适合商业/企业用途，并支持深色模式。

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-5">
    <div class="max-w-lg w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-md bg-opacity-50 p-6">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Heat Map Visualization</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-6">Analyze your data trends with our intuitive heat maps.
        Explore insights in a visually appealing format using earth tones inspired by nature.</p>
        <div class="grid grid-cols-2 gap-4">
            <div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <h3 class="font-medium text-gray-700 dark:text-gray-100">Region A</h3>
                <img src="https://picsum.photos/200/150?random=1" alt="Heat Map Region A" class="w-full h-auto rounded-lg">
            </div>
            <div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <h3 class="font-medium text-gray-700 dark:text-gray-100">Region B</h3>
                <img src="https://picsum.photos/200/150?random=2" alt="Heat Map Region B" class="w-full h-auto rounded-lg">
            </div>
            <div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <h3 class="font-medium text-gray-700 dark:text-gray-100">Region C</h3>
                <img src="https://picsum.photos/200/150?random=3" alt="Heat Map Region C" class="w-full h-auto rounded-lg">
            </div>
            <div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <h3 class="font-medium text-gray-700 dark:text-gray-100">Region D</h3>
                <img src="https://picsum.photos/200/150?random=4" alt="Heat Map Region D" class="w-full h-auto rounded-lg">
            </div>
        </div>
    </div>
    <footer class="mt-8 text-gray-600 dark:text-gray-300">
        <p>© 2023 Company Name. All rights reserved.</p>
    </footer>
</div>

3D 登录表单组件

一个具有 3D 设计、三元色彩方案和深色主题支持的响应式登录表单。适合社交媒体界面。

打开预览

                <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 shadow-lg transform transition-all duration-500 hover:scale-105 p-8 rounded-lg border border-gray-200 dark:border-gray-700">
        <div class="text-center mb-6">
            <img class="w-16 h-16 rounded-full mx-auto mb-2" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Welcome Back!</h2>
            <p class="text-gray-600 dark:text-gray-400">Please login to your account</p>
        </div>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-400" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-400" type="password" id="password" placeholder="••••••••" required>
            </div>
            <button class="w-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white font-semibold p-3 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out" type="submit">Login</button>
            <div class="text-center mt-4">
                <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
                <p class="text-gray-600 dark:text-gray-400"><a href="#" class="text-blue-500 hover:underline">Forgot your password?</a></p>
            </div>
        </form>
    </div>
</div>

内容显示组件

一个为商业/企业网站提供暗黑模式支持的响应式内容显示组件。

打开预览

                <div class="dark:bg-gray-900 dark:text-gray-200 py-12">
  <div class="container mx-auto px-4">
    <div class="md:flex md:items-center md:justify-between">
      <div class="md:w-1/2">
        <h2 class="text-3xl font-bold mb-4">Our Mission</h2>
        <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Learn More</button>
      </div>
      <div class="md:w-1/2 mt-8 md:mt-0">
        <img src="https://images.unsplash.com/photo-1588702547930-db7c329119ba?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Mission Image" class="rounded-lg shadow-lg">
      </div>
    </div>

    <div class="md:flex md:items-center md:justify-between mt-12">
      <div class="md:w-1/2 mb-8 md:mb-0">
        <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Values Image" class="rounded-lg shadow-lg">
      </div>
      <div class="md:w-1/2 md:pl-8">
        <h2 class="text-3xl font-bold mb-4">Our Values</h2>
        <ul class="list-disc list-inside">
          <li class="mb-2">Integrity and Honesty</li>
          <li class="mb-2">Customer Focus</li>
          <li class="mb-2">Innovation and Excellence</li>
          <li class="mb-2">Teamwork and Collaboration</li>
        </ul>
      </div>
    </div>

    <div class="mt-12 text-center">
      <h2 class="text-3xl font-bold mb-6">What Our Clients Say</h2>
      <div class="md:flex md:-mx-4">
        <div class="md:w-1/3 px-4 mb-8 md:mb-0">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">John Smith</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">CEO, Company A</p>
              </div>
            </div>
          </div>
        </div>
        <div class="md:w-1/3 px-4 mb-8 md:mb-0">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">Jane Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Marketing Director, Company B</p>
              </div>
            </div>
          </div>
        </div>
        <div class="md:w-1/3 px-4">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">Peter Jones</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">CTO, Company C</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

喜欢/反应按钮组件

一个响应式点赞/反应按钮组件，考虑到微交互，采用单色配色方案，适合博客和内容消费，并支持深色主题。

打开预览

                <div class="flex flex-col items-center p-4 space-y-4 bg-gray-200 dark:bg-gray-800 rounded-md shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Engage with this post!</h2>
    <div class="flex space-x-4">
        <button class="relative group p-2 rounded-full text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Like" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Like</span>
        </button>
        <button class="relative group p-2 rounded-full text-green-600 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Love" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Love</span>
        </button>
        <button class="relative group p-2 rounded-full text-red-600 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Angry" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Angry</span>
        </button>
    </div>
    <p class="text-sm text-gray-600 dark:text-gray-400">Your reactions help us improve!</p>
</div>

视频播放器组件

一个为深色模式设计的响应式视频播放器组件，采用相似色彩方案以便于内容消费。

打开预览

                <div class="bg-gray-900 text-gray-300 p-4 rounded-lg shadow-lg max-w-lg mx-auto">
    <div class="relative aspect-w-16 aspect-h-9">
        <video class="rounded-lg" controls>
            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div class="mt-4">
        <h2 class="text-lg font-semibold">Video Title</h2>
        <p class="text-sm">This is a short description of the video content. It provides context and encourages the viewer to watch the video.</p>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <div>
            <h3 class="text-md font-semibold">Username</h3>
            <p class="text-xs text-gray-500">Posted on <time datetime="2023-10-01">October 1, 2023</time></p>
        </div>
    </div>
</div>

网格布局组件

一个为社交媒体界面设计的响应式网格布局组件，采用拟物风格，具有三元色彩、多个交互元素和深色主题支持。

打开预览

                <div class="min-h-screen bg-gray-900 text-white p-6">
    <h1 class="text-3xl font-bold mb-6">Social Media Feed</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Post Card -->
        <div class="bg-gray-800 shadow-lg rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/post1/400/200" alt="Post Image" />
            <div class="p-4">
                <div class="flex items-center space-x-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                    <div>
                        <h2 class="font-semibold text-lg">User Name</h2>
                        <p class="text-gray-400">@username</p>
                    </div>
                </div>
                <p class="mt-2 text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
                <div class="mt-4 flex items-center space-x-4">
                    <button class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600">Like</button>
                    <button class="px-4 py-2 bg-green-500 rounded hover:bg-green-600">Comment</button>
                    <button class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">Share</button>
                </div>
            </div>
        </div>
        <!-- Repeat similar post cards for more content -->
        <div class="bg-gray-800 shadow-lg rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/post2/400/200" alt="Post Image" />
            <div class="p-4">
                <div class="flex items-center space-x-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
                    <div>
                        <h2 class="font-semibold text-lg">User Name</h2>
                        <p class="text-gray-400">@username</p>
                    </div>
                </div>
                <p class="mt-2 text-gray-300">Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
                <div class="mt-4 flex items-center space-x-4">
                    <button class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600">Like</button>
                    <button class="px-4 py-2 bg-green-500 rounded hover:bg-green-600">Comment</button>
                    <button class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">Share</button>
                </div>
            </div>
        </div>
        <div class="bg-gray-800 shadow-lg rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/post3/400/200" alt="Post Image" />
            <div class="p-4">
                <div class="flex items-center space-x-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
                    <div>
                        <h2 class="font-semibold text-lg">User Name</h2>
                        <p class="text-gray-400">@username</p>
                    </div>
                </div>
                <p class="mt-2 text-gray-300">Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis.</p>
                <div class="mt-4 flex items-center space-x-4">
                    <button class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600">Like</button>
                    <button class="px-4 py-2 bg-green-500 rounded hover:bg-green-600">Comment</button>
                    <button class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">Share</button>
                </div>
            </div>
        </div>
    </div>
</div>

搜索框组件

一个极简和扁平化设计的搜索框组件，采用柔和的色彩方案，复杂的界面包含多个交互元素，旨在展示作品或产品的作品集。

打开预览

                <div class="flex justify-center items-center p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full md:w-1/2">
    <input type="text" placeholder="Search..." class="w-full h-12 p-4 mr-2 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-300 transition duration-200 ease-in-out" />
    <button class="h-12 px-4 text-white bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 rounded-lg focus:outline-none transition duration-200 ease-in-out">Search</button>
</div>

<div class="mt-6 bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Portfolio</h2>
    <p class="text-gray-600 dark:text-gray-400">Showcasing work or products.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
    </div>
</div>

用户资料组件

一个响应式用户个人资料组件，使用 Tailwind CSS，具有材料设计影响和单色配色方案。支持深色模式，显示用户信息、统计数据和最近活动。

打开预览

                <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-xl shadow-2xl overflow-hidden">
    <div class="relative">
      <img class="w-full h-40 object-cover object-center" src="https://picsum.photos/seed/material/400/200" alt="Profile background">
      <div class="absolute inset-0 bg-blue-500 opacity-40"></div>
    </div>
    <div class="relative z-10 -mt-16 flex items-center justify-center">
      <img class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-800 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
    </div>
    <div class="text-center p-6">
      <h3 class="text-2xl font-semibold text-gray-800 dark:text-white">John Doe</h3>
      <p class="text-sm text-blue-600 dark:text-blue-400">@johndoe</p>
      <p class="mt-3 text-gray-600 dark:text-gray-300 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="flex justify-around border-t border-gray-200 dark:border-gray-700 py-4">
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">1.2K</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Followers</p>
      </div>
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">350</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Following</p>
      </div>
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">2.5K</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Likes</p>
      </div>
    </div>
     <div class="p-6 border-t border-gray-200 dark:border-gray-700">
      <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Activity</h4>
      <ul class="space-y-4">
        <li class="flex items-start">
          <div class="flex-shrink-0">
            <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar">
          </div>
          <div class="ml-3">
            <p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-medium text-gray-800 dark:text-white">Jane Smith</span> liked your post.</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
          </div>
        </li>
         <li class="flex items-start">
          <div class="flex-shrink-0">
            <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User avatar">
          </div>
          <div class="ml-3">
            <p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-medium text-gray-800 dark:text-white">Peter Jones</span> commented on your photo.</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">5 hours ago</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

3D灰度商务容器

用于商业/企业网站的 3D 灰度容器组件

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="relative max-w-md mx-auto dark:bg-gray-800 bg-white rounded-xl shadow-2xl overflow-hidden md:max-w-2xl perspective">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48 view-3d" src="https://picsum.photos/seed/unsplash/600/400" alt="Modern building architecture">
      </div>
      <div class="p-8 flex flex-col justify-between leading-normal">
        <div class="mb-8">
          <p class="text-sm font-bold text-gray-500 dark:text-gray-400">Business Solutions</p>
          <h2 class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">Innovative Strategies for Growth</h2>
          <p class="mt-2 text-gray-600 dark:text-gray-300">We provide cutting-edge solutions to help your business thrive in a competitive market. Our strategies are tailored to your specific needs for maximum impact.</p>
        </div>
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4 view-3d-avatar" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of the CEO">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">John Smith</p>
            <p class="text-gray-600 dark:text-gray-400">CEO and Founder</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.perspective {
  perspective: 1000px;
}

.view-3d {
  transform: rotateY(5deg) rotateX(5deg);
  transition: transform 0.5s ease;
}

.view-3d:hover {
  transform: rotateY(0deg) rotateX(0deg);
}

.view-3d-avatar {
    transform: translateZ(20px);
    transition: transform 0.5s ease;
}

.view-3d-avatar:hover {
  transform: translateZ(0px);
}
</style>

跳至内容链接

一个跳到内容链接组件，按照材料设计原则进行样式设计，使用单色方案，并支持暗模式。适合电子商务网站，使用Tailwind CSS构建，无需JavaScript。

打开预览

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 z-50 bg-gray-800 text-white px-4 py-2 rounded dark:bg-gray-200 dark:text-gray-900">Skip to content</a>

1 ... 117 118 119 120 121 ... 242