搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

页脚导航组件

一个简单的页脚导航组件，采用材料设计原则和类似的配色方案，适用于商业/企业网站。它支持深色模式且是响应式的。

                <footer class="bg-gray-100 dark:bg-gray-800 py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <img src="https://picsum.photos/200/50" alt="Company Logo" class="h-10" />
            </div>
            <div class="flex flex-col md:flex-row space-x-4">
                <a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">About Us</a>
                <a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">Services</a>
                <a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">Contact</a>
                <a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">Privacy Policy</a>
            </div>
        </div>
        <div class="mt-6 text-center">
            <p class="text-gray-600 dark:text-gray-400 text-sm">© 2023 Company Name. All rights reserved.</p>
        </div>
    </div>
</footer>

复古博客模态

一个复古风格的模态组件，适用于博客内容，特色是互补的配色方案，适度复杂的互动元素，响应式设计，并支持深色模式。未使用JavaScript，仅依赖HTML和Tailwind CSS类。图片来源于picsum.photos，头像来源于randomuser.me。

打开预览

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-cyan-800 dark:text-white">
    <div class="mt-3 text-center">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-cyan-100 dark:bg-cyan-600">
        <svg class="h-6 w-6 text-cyan-600 dark:text-cyan-100" 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="M5 13l4 4L19 7"></path></svg>
      </div>
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Modal Title</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-200">Modal Content Goes Here. Replace with your blog content or message.</p>
        <img class="mt-4 rounded-md" src="https://picsum.photos/400/200" alt="Placeholder Image">
        <div class="flex justify-center mt-4">
          <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
        </div>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-cyan-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-cyan-600 focus:outline-none focus:ring-2 focus:ring-cyan-300 dark:bg-cyan-700 dark:hover:bg-cyan-900 dark:focus:ring-cyan-800">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

拟物化浅色侧边栏

一个简单的响应式侧边栏组件，采用拟物化设计和柔和的颜色，适合博客或内容网站。包括深色模式支持。

打开预览

                <div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex items-center justify-center h-16 bg-gray-300 dark:bg-gray-700 shadow-md">
    <span class="text-lg font-semibold text-gray-700 dark:text-gray-200">Blog Menu</span>
  </div>
  <nav class="flex-grow p-4">
    <ul class="space-y-2">
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          Home
        </a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          About
        </a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          Contact
        </a>
      </li>
    </ul>
  </nav>
</div>

带微交互的关注按钮

一个响应式的关注按钮组件，支持深色主题和微交互，专为使用Tailwind CSS的社交媒体应用设计。具有单色配色方案和复杂的互动元素。

打开预览

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative inline-block group">
    <button class="px-6 py-3 text-sm font-semibold text-white bg-blue-600 rounded-full transition-all duration-300 ease-in-out transform group-hover:scale-105 group-active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:group-hover:bg-blue-600 dark:focus:ring-blue-600">
      Follow
    </button>
    <div class="absolute inset-0 rounded-full bg-blue-500 opacity-0 blur transition-all duration-500 ease-in-out group-hover:opacity-70"></div>
  </div>
</div>

3D 轮播滑块

一个简单且响应式的轮播滑块，具有3D设计风格和柔和的配色方案，适用于社交媒体界面，支持深色模式。

打开预览

                <div class="relative w-full max-w-2xl mx-auto mt-10">
    <!-- Carousel container -->
    <div class="overflow-hidden rounded-lg shadow-2xl">
        <div class="flex transition-transform duration-300 ease-in-out transform perspective-1000">
            <!-- Carousel item 1 -->
            <div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-blue rounded-lg">
                <img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=1" alt="Carousel Image 1">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 1</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description for image 1.</p>
                </div>
            </div>
            <!-- Carousel item 2 -->
            <div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-green rounded-lg">
                <img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=2" alt="Carousel Image 2">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 2</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description for image 2.</p>
                </div>
            </div>
            <!-- Carousel item 3 -->
            <div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-yellow rounded-lg">
                <img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=3" alt="Carousel Image 3">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 3</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description for image 3.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Navigation buttons -->
    <button class="absolute top-1/2 left-0 z-10 p-2 text-white bg-blue-500 rounded-full hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
        &#10094;
    </button>
    <button class="absolute top-1/2 right-0 z-10 p-2 text-white bg-blue-500 rounded-full hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
        &#10095;
    </button>
    <!-- Avatar section -->
    <div class="flex justify-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-lg">
        <span class="text-lg font-medium text-gray-800 dark:text-gray-200 ml-2">User Name</span>
    </div>
</div>

登录/注册组件

一个复杂的登录/注册组件，使用材料设计原则和单色配色方案，适用于支持深色主题的商业和企业网站。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 text-center mb-6">Welcome</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please login or signup to continue.</p>
        <div class="flex flex-col space-y-4">
            <!-- Login Form -->
            <form class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="login-email">Email</label>
                    <input type="email" id="login-email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="[email protected]" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="login-password">Password</label>
                    <input type="password" id="login-password" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" required>
                </div>
                <button type="submit" class="w-full bg-blue-600 text-white p-2 rounded-md shadow hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition duration-300">Login</button>
            </form>
            <!-- Separator -->
            <div class="flex items-center justify-center space-x-2">
                <div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600"></div>
                <span class="text-gray-500 dark:text-gray-400">OR</span>
                <div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600"></div>
            </div>
            <!-- Signup Form -->
            <form class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-name">Full Name</label>
                    <input type="text" id="signup-name" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Your Name" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-email">Email</label>
                    <input type="email" id="signup-email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="[email protected]" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-password">Password</label>
                    <input type="password" id="signup-password" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" required>
                </div>
                <button type="submit" class="w-full bg-blue-600 text-white p-2 rounded-md shadow hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition duration-300">Signup</button>
            </form>
            <!-- Avatar Image -->
            <div class="flex justify-center mt-6">
                <img src="https://picsum.photos/100/100" alt="Avatar" class="rounded-full border-4 border-blue-500"> 
            </div>
        </div>
    </div>
</div>

社交组件

一个以微交互为重点的社交组件，专为博客设计，具有引人入胜的动画和单色配色方案。

打开预览

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Social Engagement</h2>
    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-600 transition duration-300 ease-in-out transform hover:scale-110">
        <div>
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">John Doe</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">@john_doe</p>
        </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300 mb-4">This is a post about engaging with content effectively in today's digital landscape.</p>
    <img src="https://picsum.photos/600/300" alt="Blog post preview" class="rounded-lg mb-4 transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
    <div class="flex items-center space-x-4">
        <button class="flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg transition duration-300 ease-in-out hover:bg-blue-600 dark:hover:bg-blue-400 shadow focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7" />
            </svg>
            Share
        </button>
        <button class="flex items-center px-4 py-2 bg-gray-200 text-gray-700 rounded-lg transition duration-300 ease-in-out hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 shadow focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12h-3.086a2.003 2.003 0 00-3.415 0H5m14-1h-2.586a2.003 2.003 0 00-3.415 0H4m5 0l2 2-2 2m0-4l-2 2-2-2" />
            </svg>
            Comment
        </button>
    </div>
</div>

喜欢/反应按钮组件

一个复古/年代风格的点赞/反应按钮组件，特色是一系列用于反应的互动按钮，支持深色主题和响应式设计。该组件适合用于仪表盘，使用户能对界面中的各种元素进行反应。

打开预览

                <div class="bg-gray-900 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-extrabold text-center text-yellow-300 mb-4">React with Nostalgia!</h2>
    <div class="flex justify-around mb-4">
        <button class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">❤️ Like</button>
        <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😂 Haha</button>
        <button class="bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😢 Sad</button>
        <button class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😡 Angry</button>
    </div>
    <hr class="border-gray-600 mb-4">
    <div class="flex items-center justify-center">
        <img class="w-12 h-12 rounded-full border-2 border-yellow-300 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-lg text-gray-300">John Doe</span>
    </div>
    <div class="mt-4">
        <p class="text-gray-400 text-center">React to the content with your feelings!</p>
    </div>
</div>

<div class="bg-gray-900 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-lg mx-auto mt-6">
    <h3 class="text-xl font-semibold text-center text-yellow-300 mb-4">Select Your Mood</h3>
    <div class="grid grid-cols-2 gap-4">
        <button class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Excited</button>
        <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Happy</button>
        <button class="bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Sad</button>
        <button class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Angry</button>
    </div>
</div>

价格显示组件

一个受3D启发的价格显示组件，采用单色配色方案，专为社交媒体界面设计。它是一个复杂的响应式组件，支持深色模式，使用Tailwind CSS构建。未包含JavaScript。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6"> <div class="relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div> <div class="relative z-10 p-8"> <div class="text-center mb-8"> <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Pro Plan</h2> <p class="text-gray-600 dark:text-gray-400">Unlock all features</p> </div> <div class="text-center mb-8"> <span class="text-6xl font-extrabold text-gray-900 dark:text-[var(--monochromatic-color)]">$49</span> <span class="text-2xl font-semibold text-gray-700 dark:text-gray-300">/month</span> </div> <ul class="mb-8 space-y-4"> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" 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="M5 13l4 4L19 7"></path></svg> Unlimited Users </li> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" 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="M5 13l4 4L19 7"></path></svg> 100GB Storage </li> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" 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="M5 13l4 4L19 7"></path></svg> Email Support </li> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" 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="M5 13l4 4L19 7"></path></svg> Custom Analytics </li> </ul> <a href="#" class="block w-full py-3 text-center text-white font-bold bg-blue-600 dark:bg-[var(--dark-monochromatic-color)] rounded-lg hover:bg-blue-700 dark:hover:bg-[var(--darker-monochromatic-color)] transition duration-300 ease-in-out transform hover:scale-105 shadow-lg"> Get Started </a> </div> </div> <div class="absolute bottom-0 right-0 -mb-20 -mr-20 w-40 h-40 bg-blue-500 dark:bg-[var(--monochromatic-accent-color)] rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000"></div> <div class="absolute bottom-0 left-0 -mb-20 -ml-20 w-40 h-40 bg-purple-500 dark:bg-[var(--monochromatic-secondary-color)] rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000"></div> <div class="absolute top-0 right-0 -mt-20 -mr-20 w-40 h-40 bg-pink-500 dark:bg-[var(--monochromatic-tertiary-color)] rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob"></div> </div>

数据可视化组件

一个简单的响应式电子商务数据可视化组件，采用玻璃态设计风格和单色配色方案，支持暗模式。

打开预览

                <div class="min-h-screen bg-gray-800 flex items-center justify-center p-5">
    <div class="bg-white dark:bg-gray-900 bg-opacity-60 backdrop-blur-lg rounded-lg shadow-lg p-8 w-full max-w-3xl">
        <h2 class="text-gray-900 dark:text-white text-2xl font-bold mb-5">Product Insights</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Total Sales</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/100" alt="Sales Insights" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">$15,237</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Total Products</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/101" alt="Product Count" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">250</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Average Order Value</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/102" alt="Average Order Value" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">$61.50</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">New Customers</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/103" alt="New Customers" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">35</p>
            </div>
        </div>
        <div class="mt-5 border-t border-gray-300 dark:border-gray-600 pt-5">
            <h3 class="text-gray-900 dark:text-white font-bold mb-2">Customer Feedback</h3>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar" />
                <div class="ml-4">
                    <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                    <p class="text-gray-600 dark:text-gray-400">"Great shopping experience! Highly recommend."</p>
                </div>
            </div>
        </div>
    </div>
</div>

1 ... 235 236 237 238 239 ... 335