搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

产品画廊组件

一个响应式产品画廊，采用复古风格，具有互补色配色方案，专为商业/企业网站设计，支持暗模式。

                <div class="max-w-6xl mx-auto p-5">
    <h2 class="text-3xl font-bold text-center text-amber-500">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 1</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$29.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 2</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$39.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 3</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$19.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 4</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$49.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 5</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$59.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-orange-300">Product Title 6</h3>
                <p class="text-gray-400">A brief description of the product that highlights its features.</p>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-xl text-amber-500 font-bold">$69.99</span>
                    <button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
                </div>
            </div>
        </div>
    </div>
</div>

交互组件组件

一个为社交媒体设计的复杂互动组件，采用拟物化设计和单色配色方案。

打开预览

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-white text-2xl font-bold mb-4">Interactive Components</h2>
    <div class="bg-gray-700 dark:bg-gray-800 rounded-lg shadow-inner p-4 mb-4">
        <h3 class="text-gray-300 text-lg font-semibold">User Posts</h3>
        <div class="flex items-center space-x-4 mb-3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600" />
            <div class="flex-1">
                <textarea rows="3" class="w-full p-2 bg-gray-600 dark:bg-gray-700 text-white rounded-md border border-gray-500 focus:border-gray-400 focus:outline-none" placeholder="What's on your mind?"></textarea>
                <div class="flex justify-between mt-2">
                    <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-4 rounded">Post</button>
                    <button class="text-gray-400 hover:text-gray-200 font-semibold">Cancel</button>
                </div>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md">
            <div class="flex items-start space-x-3 mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-600" />
                <div class="flex-1">
                    <p class="text-gray-200 font-semibold">Jane Doe</p>
                    <p class="text-gray-400">Just had a great coffee!</p>
                    <img src="https://picsum.photos/200/100?random=1" alt="Post Image" class="mt-2 rounded-lg shadow-md" />
                    <div class="flex space-x-4 mt-2">
                        <button class="flex items-center text-gray-400 hover:text-blue-500 font-semibold">
                            <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 13l4 4H5v-4zm0 0l4-4H5v4zm14-4l4 4h-4l4-4zm0 0l-4-4h4l-4 4z"/></svg>
                            Like
                        </button>
                        <button class="flex items-center text-gray-400 hover:text-blue-500 font-semibold">
                            <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="M8 10h8M8 14h3m6 5c1.042 0 1.932-.592 2.42-1.53a3.001 3.001 0 00-2.53-4.47c-.961 0-1.86.467-2.53 1.53-1.184 1.59-3.49 1.56-5.42.43-.758-.395-1.5-.87-2.5-1.43M9 21h6m-3-3.25l3.625-1.81a3.997 3.997 0 00-.676-7.376M15 19.25h-6m0 0l-.625 1.37M9 21l.365.734M11 20.25l3 1.25m-1-6v6m0-6s2 1.5 4 0m-4 0c-.5 0-.5-1 0-1.5s.5-1 1-1 2 0 2 0v1s-1.5 1.5-2 2c-1 0-1-1-1-1s-2 1 0 2c0 0 1 .5 2 0V19H9m1-2s-1 1-2 0m2 0c1.5 0 1.5 2 0 3c0 0-1-1 0-2z"/></svg>
                            Comment
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

信息图组件

一个响应式的3D信息图组件，专为社交媒体界面设计，具有生动的色彩和暗主题支持，融入三维元素以增强深度和互动性。

打开预览

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <div class="text-center mb-4">
        <h2 class="text-3xl font-bold">Infographic Title</h2>
        <p class="text-gray-400">Engaging insights and data visualizations</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105"> 
            <h3 class="font-semibold text-xl">Key Insight #1</h3>
            <img src="https://picsum.photos/id/1018/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
            <p class="text-gray-200">Details about the first key insight go here. It should be engaging and informative.</p>
        </div>
        <div class="bg-gradient-to-r from-green-400 to-teal-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
            <h3 class="font-semibold text-xl">Key Insight #2</h3>
            <img src="https://picsum.photos/id/1015/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
            <p class="text-gray-200">Details about the second key insight go here. Make it intriguing!</p>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Join the Conversation</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <input type="text" placeholder="Share your thoughts..." class="bg-gray-700 text-white rounded-full py-2 px-4 w-full" />
        </div>
        <button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full inline-flex items-center">Submit</button>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-gray-800 {
        background-color: #1c1c1c;
    }
    .bg-gradient-to-r {
        background-image: linear-gradient(to right, #6a0dad, #1e90ff);
    }
}
</style>

身份验证组件

一个响应式和互动的登录与注册组件，采用微交互设计，使用互补色彩为博客内容界面提供暗主题支持。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white text-center">Welcome Back!</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="[email protected]" 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 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="••••••••" required />
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" id="remember" class="mr-2 leading-tight">
                    <label for="remember" class="text-gray-700 dark:text-gray-300">Remember me</label>
                </div>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Forgot Password?</a>
            </div>
            <button class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Login</button>
        </form>
        <div class="mt-6 text-center">
            <span class="text-gray-700 dark:text-gray-300">Don't have an account? </span>
            <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Sign Up</a>
        </div>
    </div>
</div>

聊天窗口组件

一个响应式聊天窗口组件，支持暗模式，专为商业用途设计，带有细微的微交互。采用单色配色方案。不需要JavaScript。

打开预览

                <div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
    <div class="flex-1 overflow-y-auto p-4">
        <!-- Chat messages go here -->
        <div class="flex items-end mb-4">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg max-w-xs">
                <p class="text-sm">Hello! How can I help you today?</p>
            </div>
        </div>
        <div class="flex items-end justify-end mb-4">
            <div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
                <p class="text-sm">I have a question about my order.</p>
            </div>
            <img class="w-8 h-8 rounded-full ml-2" src="https://randomuser.me/api/portraits/women/33.jpg" alt="Avatar">
        </div>
        <!-- More messages -->
    </div>
    <div class="bg-white dark:bg-gray-800 p-4">
        <div class="flex items-center">
            <input type="text" placeholder="Type your message..." class="flex-1 border border-gray-300 dark:border-gray-700 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
            <button class="ml-2 bg-blue-500 dark:bg-blue-700 text-white rounded-full p-2 hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform transition duration-300 ease-in-out hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

产品画廊组件

一个采用材料设计风格的产品画廊组件，具有三元配色方案。它具有基于网格的布局、响应式动画，并支持暗主题。画廊包含图像和头像，适用于仪表盘。

打开预览

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Product Gallery</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=1" alt="Product Image 1" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 1. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=2" alt="Product Image 2" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 2. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=3" alt="Product Image 3" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 3. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=4" alt="Product Image 4" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 4. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
      <img src="https://picsum.photos/300/200?random=5" alt="Product Image 5" class="w-full h-40 object-cover">
      <div class="p-4">
        <h3 class="font-medium text-gray-800 dark:text-white">Product Title 5</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of Product 5. This is a great product that offers many features.</p>
        <div class="flex items-center mt-2">
          <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
          <span class="text-gray-700 dark:text-gray-200">User Name</span>
        </div>
      </div>
    </div>
  </div>
</div>

模态组件

一个响应式模态组件，采用微交互和三元配色方案设计，适用于社交媒体界面。具有用户交互时的动画效果，并使用Tailwind CSS提供暗主题支持。

打开预览

                <div class="fixed z-50 inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900 transition-opacity duration-500 ease-in-out" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full">
    <div class="bg-gray-100 dark:bg-gray-700 px-4 py-5 sm:px-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">
        Share Your Thoughts
      </h3>
      <div class="mt-2">
        <p class="text-sm text-gray-500 dark:text-gray-300">
          Engage with your friends and share ideas or posts directly here.
        </p>
      </div>
    </div>
    <div class="p-6">
      <form class="space-y-4">
        <textarea class="w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500" placeholder="What's on your mind?"></textarea>
        <div class="flex items-center space-x-4">
          <img class="w-10 h-10 rounded-full shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <button type="submit" class="inline-flex justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Post
          </button>
        </div>
      </form>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
      <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
        Close
      </button>
    </div>
  </div>
</div>

愿望清单组件

一个为商业网站设计的粗犷风格愿望清单组件，具有灰度配色方案和适度复杂性。响应式设计，使用Tailwind CSS类支持暗模式。

打开预览

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h2 class="text-2xl font-bold mb-4 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Wishlist</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
      <img src="https://picsum.photos/seed/item1/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
      <h3 class="text-xl font-bold mb-2">Product Title 1</h3>
      <p class="mb-2">Short description of the product.</p>
      <p class="font-bold mb-4">$99.99</p>
      <button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
      <div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
    </div>
    <div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
      <img src="https://picsum.photos/seed/item2/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
      <h3 class="text-xl font-bold mb-2">Product Title 2</h3>
      <p class="mb-2">Short description of the product.</p>
      <p class="font-bold mb-4">$149.99</p>
      <button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
      <div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">Out of Stock</div>
    </div>
    <div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
      <img src="https://picsum.photos/seed/item3/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
      <h3 class="text-xl font-bold mb-2">Product Title 3</h3>
      <p class="mb-2">Short description of the product.</p>
      <p class="font-bold mb-4">$79.99</p>
      <button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
      <div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
    </div>
  </div>
</div>

目录组件

一个响应式的目录组件，采用拟物化元素和大地色调设计，适用于作品展示，并支持暗模式。

打开预览

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-green-800 dark:text-green-200 mb-4">Table of Contents</h2>
    <ul class="space-y-4">
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section1" class="text-gray-800 dark:text-gray-200 font-semibold">Section 1</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section2" class="text-gray-800 dark:text-gray-200 font-semibold">Section 2</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section3" class="text-gray-800 dark:text-gray-200 font-semibold">Section 3</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section4" class="text-gray-800 dark:text-gray-200 font-semibold">Section 4</a>
        </li>
    </ul>
</div>

玻璃化按钮组件

一个简单的响应式玻璃化按钮组件，采用柔和的色彩和黑暗模式支持，使用Tailwind CSS。

打开预览

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-4">
    <button class="px-6 py-3 text-lg font-semibold text-white bg-pink-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-pink-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 1
    </button>
    <button class="px-6 py-3 text-lg font-semibold text-white bg-blue-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-blue-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 2
    </button>
  </div>
</div>

1 ... 223 224 225 226 227 ... 335