类别

所有组件

浏览所有可用的 Tailwind CSS 组件

错误信息组件

一个使用 Tailwind CSS 设计的响应式错误信息组件，具有吸引用户互动的动画，并支持深色主题。

                <div class="max-w-lg mx-auto p-4">
    <!-- Error Message Card -->
    <div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <!-- Error Icon -->
        <div class="flex items-center mb-2">
            <img src="https://picsum.photos/40/40?random=1" alt="Error Icon" class="w-10 h-10 mr-2 rounded-full" />
            <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Error Title</h2>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">This is a descriptive error message that provides more detail about the issue.</p>
        <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
            Close
        </button>
    </div>
    
    <!-- Example of Multiple Error Messages -->
    <div class="mt-4 space-y-4">
        <div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 mr-2 rounded-full" />
                <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">User Not Found</h2>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">The user you are looking for might have been removed.</p>
            <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
                Retry
            </button>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 mr-2 rounded-full" />
                <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Network Error</h2>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">There seems to be a network issue, please check your connection.</p>
            <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
                Reload
            </button>
        </div>
    </div>
</div>

注册表单组件

一个使用 Tailwind CSS 的极简扁平设计注册表单，带有响应式效果和深色主题支持。

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Register</h2>
        <form class="mt-6">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="name">Full Name</label>
                <input type="text" id="name" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your full name" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email Address</label>
                <input type="email" id="email" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your password" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="confirm-password">Confirm Password</label>
                <input type="password" id="confirm-password" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Confirm your password" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="avatar">Profile Picture</label>
                <div class="mt-1 flex justify-center">
                    <img src="https://i.picsum.photos/id/1014/200/200.jpg" alt="Avatar" class="rounded-full w-20 h-20 border-2 border-gray-300 dark:border-gray-600"/>
                </div>
                <p class="text-center text-gray-500 dark:text-gray-400">Random Avatar</p>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">Register</button>
        </form>
        <p class="mt-4 text-gray-600 dark:text-gray-400 text-center">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-700">Login</a></p>
    </div>
</div>

评论区组件

一个使用 Tailwind CSS 设计的极简评论区组件，具有干净的线条、响应式效果和深色模式支持。它包含用户头像、评论文本、时间戳和一个简单的新评论输入区域。

打开预览

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Comments</h2>
    <div class="max-h-96 overflow-y-auto">
        <div class="flex items-start mb-4">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="flex-1">
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
                    <p class="text-gray-800 dark:text-gray-200">This is a comment from a user. It has a minimalist style.</p>
                </div>
                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">2 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" />
            <div class="flex-1">
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
                    <p class="text-gray-800 dark:text-gray-200">Another comment from a different user. This design is very clean.</p>
                </div>
                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">3 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
            <div class="flex-1">
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
                    <p class="text-gray-800 dark:text-gray-200">I really like this minimalist approach!</p>
                </div>
                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">5 hours ago</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 resize-none" rows="3" placeholder="Add a comment..."></textarea>
        <button class="mt-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600">Post Comment</button>
    </div>
</div>

音频播放器组件

一个使用 Tailwind CSS 设计的响应式音频播放器组件，采用深色模式。它支持深色主题，提供清晰的音频播放界面。

打开预览

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-md max-w-lg mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/80/80" alt="Album Art" class="rounded-full border-2 border-gray-600">
        <div class="ml-4">
            <h2 class="text-lg font-semibold">Song Title</h2>
            <p class="text-gray-400">Artist Name</p>
        </div>
    </div>
    <audio controls class="w-full mb-4">
        <source src="path_to_your_audio_file.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <div class="flex items-center justify-between">
        <button class="text-gray-300 hover:text-white">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 3l7 7-7 7-7-7 7-7z" />
            </svg>
        </button>
        <div class="flex items-center">
            <button class="text-gray-300 hover:text-white mx-2">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 3l7 7-7 7-7-7 7-7z" />
                </svg>
            </button>
            <input type="range" class="w-32 mx-2 accent-gray-600" value="50" />
            <button class="text-gray-300 hover:text-white mx-2">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 3l7 7-7 7-7-7 7-7z" />
                </svg>
            </button>
        </div>
        <button class="text-gray-300 hover:text-white">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 3l7 7-7 7-7-7 7-7z" />
            </svg>
        </button>
    </div>
</div>

拟物风格登录表单

一个使用 Neumorphism 风格设计的登录表单组件，具备响应式设计和深色主题支持，使用 Tailwind CSS。

打开预览

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-96">
        <h1 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Login</h1>
        <form>
            <div class="mb-4">
                <label for="email" class="block text-gray-700 dark:text-gray-200">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label for="password" class="block text-gray-700 dark:text-gray-200">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="••••••••" required />
            </div>
            <div class="mt-6">
                <button type="submit" class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Login</button>
            </div>
        </form>
    </div>
</div>

产品卡片组件

一个使用 Tailwind CSS 设计的野性风格产品卡片组件，具有响应式效果和深色主题支持。

打开预览

                <div class="flex flex-wrap justify-center p-4 bg-gray-100 dark:bg-gray-800">
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 1</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </div>
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 2</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </div>
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 3</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </div>
</div>

产品比较组件

一个使用 Tailwind CSS 设计的拟物化产品比较组件，具备响应式效果和深色主题支持。

打开预览

                <div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
    <div class="w-full md:w-1/2 p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product A</h2>
        <img src="https://picsum.photos/300/200?random=1" alt="Product A" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
        <p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ex non quam cursus vestibulum.</p>
        <div class="mt-4">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 1</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 2</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 3</span>
        </div>
    </div>
    <div class="w-full md:w-1/2 p-6 border-l border-gray-300 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product B</h2>
        <img src="https://picsum.photos/300/200?random=2" alt="Product B" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
        <p class="text-gray-600 dark:text-gray-400 mt-2">Suspendisse tincidunt, nunc id congue euismod, arcu enim cursus diam, in imperdiet urna risus quis eros.</p>
        <div class="mt-4">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature A</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature B</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature C</span>
        </div>
    </div>
</div>

购物车组件

一个使用 Tailwind CSS 设计的 3D 购物车组件，具备响应式效果和深色主题支持。

打开预览

                <div class='bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md mx-auto transform transition-all duration-300 hover:scale-105'>
    <h2 class='text-xl font-semibold text-gray-800 dark:text-white'>Shopping Cart</h2>
    <ul class='mt-4 space-y-4'>
        <li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
            <img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
            <div class='flex-grow pl-4'>
                <h3 class='text-gray-800 dark:text-white font-medium'>Product Name</h3>
                <p class='text-gray-600 dark:text-gray-300'>$19.99</p>
            </div>
            <button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
        </li>
        <li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
            <img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
            <div class='flex-grow pl-4'>
                <h3 class='text-gray-800 dark:text-white font-medium'>Another Product</h3>
                <p class='text-gray-600 dark:text-gray-300'>$29.99</p>
            </div>
            <button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
        </li>
    </ul>
    <div class='mt-6 flex justify-between items-center'>
        <span class='text-gray-800 dark:text-white text-lg'>Total:</span>
        <span class='text-gray-800 dark:text-white text-lg font-semibold'>$49.98</span>
    </div>
    <button class='mt-5 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition'>Proceed to Checkout</button>
</div>

360°查看器组件

一个使用 Tailwind CSS 设计的极简主义 360° 查看器组件，具有响应式效果和深色主题支持。

打开预览

                <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">360° Viewer</h2>
    <div class="overflow-hidden rounded-lg w-full max-w-md">
        <img src="https://picsum.photos/600/400?random" alt="360° view" class="w-full transition-transform duration-500 transform hover:scale-105" />
    </div>
    <p class="mt-4 text-gray-600 dark:text-gray-300 text-center">Hover to see the view.</p>
    <div class="mt-6 flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-12 w-12 rounded-full border-2 border-white dark:border-gray-800 shadow" />
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-12 w-12 rounded-full border-2 border-white dark:border-gray-800 shadow" />
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="h-12 w-12 rounded-full border-2 border-white dark:border-gray-800 shadow" />
    </div>
</div>

电子商务拟态组件

一个以拟物化风格设计的响应式电子商务组件，支持 Tailwind CSS 的深色主题.

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-6">
  <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 w-full max-w-sm">
    <img class="rounded-t-lg mb-4" src="https://picsum.photos/400/200" alt="Product Image" />
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Product description goes here. This is a brief overview of the product features and benefits.</p>
    <div class="flex items-center justify-between mb-4">
      <span class="text-gray-800 dark:text-white font-bold text-lg">
        $29.99
      </span>
      <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white rounded-full py-2 px-4 shadow-md hover:shadow-lg active:shadow-sm transition duration-300">
        Add to Cart
      </button>
    </div>
    <div class="flex items-center">
      <img class="rounded-full w-10 h-10 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
      <span class="text-gray-600 dark:text-gray-300">Seller Name</span>
    </div>
  </div>
</div>

1 ... 227 228 229 230 231 ... 242