所有组件

内容展示组件 11

一个复古/怀旧风格的内容展示组件，展示80年代/90年代的怀旧设计，具有响应式效果和深色主题支持。

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="flex flex-col md:flex-row items-center p-6">
        <img class="w-full md:w-1/3 h-auto rounded-lg mb-4 md:mb-0" src="https://picsum.photos/300/200?random=1" alt="Random retro image">
        <div class="md:ml-4">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Retro/Vintage Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mb-2">This is a nostalgic description that evokes the design style of the 80s and 90s, full of vibrant colors and retro aesthetics.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <span class="text-gray-700 dark:text-gray-300">Posted by <span class="font-bold">User Name</span></span>
            </div>
        </div>
    </div>
    <div class="p-6">
        <p class="text-gray-700 dark:text-gray-300">Here’s a bit more detail about the content. This section can be used to provide additional context or information.</p>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 text-right">
        <button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Read More</button>
    </div>
</div>

进度指示器组件

一个受材料设计启发的进度指示器组件，具有响应式效果和深色主题支持，由 Tailwind CSS 构建。

打开预览

                <div class="container mx-auto p-5">
    <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Progress Indicators</h2>

    <div class="flex flex-col space-y-4">
        <!-- Linear Progress Bar -->
        <div class="w-full">
            <div class="bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-blue-600 h-2.5 rounded-full w-3/4" style="transition: width 0.5s;"></div>
            </div>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Loading... 75%</p>
        </div>

        <!-- Circular Progress Indicator -->
        <div class="flex items-center space-x-2">
            <div class="relative flex items-center justify-center w-12 h-12">
                <svg class="absolute animate-spin -ml-1 mr-3" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
                    <circle class="text-gray-200 dark:text-gray-700" cx="25" cy="25" r="20" stroke-width="5" fill="none"></circle>
                    <path class="text-blue-600" fill="none" stroke-width="5" stroke-linecap="round" d="M25 5a20 20 0 1 0 0 40A20 20 0 0 0 25 5z" style="stroke-dasharray: 125; stroke-dashoffset: 62.5;"></path>
                </svg>
                <span class="text-lg text-gray-800 dark:text-gray-200">Processing</span>
            </div>
        </div>

        <!-- Steps Progress Indicator -->
        <div class="relative">
            <div class="flex">
                <div class="flex items-center justify-center w-10 h-10 bg-blue-600 text-white rounded-full">1</div>
                <div class="flex-1 h-1 bg-gray-300 dark:bg-gray-600"></div>
                <div class="flex items-center justify-center w-10 h-10 bg-gray-300 text-gray-700 rounded-full dark:bg-gray-700 dark:text-gray-400">2</div>
                <div class="flex-1 h-1 bg-gray-300 dark:bg-gray-600"></div>
                <div class="flex items-center justify-center w-10 h-10 bg-gray-300 text-gray-700 rounded-full dark:bg-gray-700 dark:text-gray-400">3</div>
            </div>
            <div class="absolute top-[-1rem] left-[calc(50%_-_2.5rem)] bg-white dark:bg-gray-800 p-2 rounded shadow-md text-center text-sm text-gray-800 dark:text-gray-200">Step 1: Details</div>
        </div>

        <!-- Avatar Loading Indicator -->
        <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-700" />
            <div class="flex-1">
                <div class="bg-gray-300 h-2 rounded w-3/4 dark:bg-gray-600"></div>
                <div class="text-gray-600 dark:text-gray-400 text-sm">User is online</div>
            </div>
        </div>

        <!-- Image Progress Indicator -->
        <div class="flex flex-col items-center space-y-1">
            <img src="https://picsum.photos/50/50" alt="Progress Image" class="rounded-md shadow-md w-full max-w-xs" />
            <div class="bg-blue-600 h-2 rounded w-2/3 dark:bg-blue-500"></div>
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #181818;
        }
    }
</style>

社区论坛组件 9

一个社区论坛组件，具有玻璃拟态设计，配有磨砂玻璃般的半透明元素、响应式效果和深色主题支持。

打开预览

                <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 backdrop-filter backdrop-blur-lg opacity-80 rounded-lg shadow-lg p-6 max-w-lg w-full">
        <h1 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h1>
        <div class="space-y-4">
            <div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-10 h-10">
                <div>
                    <h2 class="text-gray-800 dark:text-white font-bold">John Doe</h2>
                    <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="rounded-full w-10 h-10">
                <div>
                    <h2 class="text-gray-800 dark:text-white font-bold">Jane Smith</h2>
                    <p class="text-gray-600 dark:text-gray-300">Vivamus laoreet dolor eget lectus tincidunt, et facilisis erat laoreet.</p>
                </div>
            </div>
            <div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full w-10 h-10">
                <div>
                    <h2 class="text-gray-800 dark:text-white font-bold">Alex Johnson</h2>
                    <p class="text-gray-600 dark:text-gray-300">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
                </div>
            </div>
        </div>
        <div class="mt-4">
            <textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white" rows="4" placeholder="Write your message..."></textarea>
            <button class="mt-2 w-full bg-blue-500 dark:bg-blue-600 text-white rounded-lg py-2 hover:bg-blue-600 dark:hover:bg-blue-700 transition">Post Message</button>
        </div>
    </div>
</div>

用户提及组件

一个为深色模式设计的响应式用户提及组件，支持 Tailwind CSS。

打开预览

                <div class="bg-gray-900 text-white p-4 rounded-lg shadow-lg">
    <h2 class="text-lg font-semibold mb-2">Mentions</h2>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">John Doe</p>
            <p class="text-gray-400 text-sm">@johndoe</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">Jane Smith</p>
            <p class="text-gray-400 text-sm">@janesmith</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">Mike Johnson</p>
            <p class="text-gray-400 text-sm">@mikejohnson</p>
        </div>
    </div>
    <a href="#" class="text-blue-400 hover:underline">View more mentions</a>
</div>
<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
        }
    }
</style>

网格布局组件 7

一个采用野兽派风格设计的响应式网格布局组件，使用 Tailwind CSS，具有深色主题支持和随机占位符图像。

打开预览

                <div class="bg-gray-100 dark:bg-gray-800 p-8">
    <h1 class="text-4xl font-extrabold text-black dark:text-white mb-6">Brutalism Grid Layout</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=1" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 1</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 1.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=2" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 2</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 2.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=3" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 3</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 3.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=4" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 4</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 4.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=5" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 5</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 5.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center">
            <img src="https://picsum.photos/200/300?random=6" alt="Random Image" class="rounded-lg mb-4">
            <h2 class="text-xl font-bold text-black dark:text-white">Item 6</h2>
            <p class="text-gray-600 dark:text-gray-300">This is a description of item 6.</p>
        </div>
    </div>
</div>

产品评论组件 6

一个采用材料设计原则的响应式产品评论组件，支持明亮和深色主题。

打开预览

                <div class="max-w-md mx-auto bg-white shadow-md rounded-lg overflow-hidden dark:bg-gray-800">
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Reviews</h2>
        <div class="divide-y divide-gray-200 dark:divide-gray-700">
            <div class="py-4 flex">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div class="ml-4 flex-1">
                    <div class="flex justify-between items-center">
                        <h3 class="text-sm font-medium text-gray-800 dark:text-white">John Doe</h3>
                        <span class="text-sm text-gray-500 dark:text-gray-400">5/5</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1">This product is amazing! Highly recommend it to everyone.</p>
                </div>
            </div>
            <div class="py-4 flex">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                <div class="ml-4 flex-1">
                    <div class="flex justify-between items-center">
                        <h3 class="text-sm font-medium text-gray-800 dark:text-white">Jane Smith</h3>
                        <span class="text-sm text-gray-500 dark:text-gray-400">4/5</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1">Good quality, but the shipping took too long.</p>
                </div>
            </div>
            <div class="py-4 flex">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
                <div class="ml-4 flex-1">
                    <div class="flex justify-between items-center">
                        <h3 class="text-sm font-medium text-gray-800 dark:text-white">Mike Johnson</h3>
                        <span class="text-sm text-gray-500 dark:text-gray-400">3/5</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1">It works fine, but I've seen better products in this range.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <h3 class="text-md font-semibold text-gray-800 dark:text-white">Add a Review</h3>
        <textarea class="w-full mt-2 p-2 border border-gray-300 rounded-md dark:border-gray-700 dark:bg-gray-800 dark:text-white" rows="3" placeholder="Write your review..."></textarea>
        <button class="mt-2 bg-blue-500 text-white rounded-md py-2 px-4 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Submit</button>
    </div>
</div>

下拉菜单组件 5

一个为深色模式设计的响应式下拉菜单组件，使用 Tailwind CSS 进行样式和布局。该组件具有流畅的设计、悬停效果，并支持深色主题，确保现代 UI 体验。

打开预览

                <div class="relative inline-block text-left">
  <div>
    <button class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-gray-800 text-sm font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06 0L10 10.293l3.71-3.09a.75.75 0 111.02 1.1l-4 3.333a.75.75 0 01-1.02 0l-4-3.333a.75.75 0 010-1.1z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="absolute right-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        Profile
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
        Settings
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://picsum.photos/id/1/200/200" alt="Placeholder" />
        My Images
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
        <img class="h-8 w-8 rounded-full mr-2" src="https://picsum.photos/id/2/200/200" alt="Placeholder" />
        Logout
      </a>
    </div>
  </div>
</div>

粗野主义 CAPTCHA 组件

一个采用野兽派风格设计的 CAPTCHA 组件，具有高对比度、独特布局以及支持深色主题的响应效果。

打开预览

                <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-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-black">
        <h2 class="text-xl font-bold text-black dark:text-white mb-4">Verify You Are Human</h2>
        <div class="flex items-center justify-between mb-4">
            <img src="https://picsum.photos/100/100" alt="Placeholder Image" class="rounded-full border border-black dark:border-white">
            <span class="text-lg font-bold text-black dark:text-white">Are you a robot?</span>
        </div>
        <div class="flex flex-col items-center mb-4">
            <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="w-full rounded-lg border border-black dark:border-white">
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Select the images that contains a cat.</p>
        </div>
        <div class="flex space-x-4">
            <button class="flex-1 bg-black text-white font-bold py-2 rounded-lg shadow-md hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">Verify</button>
            <button class="flex-1 bg-red-600 text-white font-bold py-2 rounded-lg shadow-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600 transition">Cancel</button>
        </div>
    </div>
</div>

视频播放器组件 3

一个采用 Neumorphism 风格设计的响应式视频播放器组件，支持深色主题，使用 Tailwind CSS。

打开预览

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-xl p-6 w-full max-w-md">
        <div class="video-container rounded-2xl overflow-hidden">
            <img src="https://picsum.photos/600/400?random=1" alt="Video Thumbnail" class="w-full h-full object-cover">
            <div class="play-button bg-gray-300 dark:bg-gray-700 rounded-full p-2 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 shadow-lg">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-gray-800 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-5.4 3.24a1 1 0 01-1.552-.832V9.664a1 1 0 011.552-.832l5.4 3.24a1 1 0 010 1.664z" />
                </svg>
            </div>
        </div>
        <div class="mt-4 text-gray-800 dark:text-gray-200 text-lg font-semibold">Video Title</div>
        <div class="text-gray-600 dark:text-gray-400">Video description goes here. This is a brief overview of the content of the video.</div>
        <div class="flex items-center justify-between mt-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
                <span class="ml-2 text-gray-800 dark:text-gray-200">User Name</span>
            </div>
            <div class="text-gray-600 dark:text-gray-400">10:30</div>
        </div>
    </div>
</div>

媒体组件 2

一个复古/古典风格的媒体组件，采用受80年代/90年代美学启发的怀旧设计，具有响应式效果和深色主题支持，使用 Tailwind CSS。

打开预览

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/retro/400/300" alt="Retro Image">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <h2 class="text-xl font-bold text-gray-900 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400 text-sm">@johndoe</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">This is a sample text for the media component, showcasing a retro design that brings back memories from the 80s and 90s.</p>
        <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400 font-semibold">Read More</a>
    </div>
</div>

类别