搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

容器组件

一个简单的响应式容器组件，用于博客/内容使用，具有微交互和深色主题支持，使用 Tailwind CSS。

                <div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/400/200" alt="Blog Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 ease-in-out hover:scale-105">
        <h2 class="mt-4 text-2xl font-semibold text-gray-800 dark:text-white transition-colors duration-300">Blog Title</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
            <div class="ml-2">
                <p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
                <p class="text-gray-500 dark:text-gray-400 text-sm">Date Published</p>
            </div>
        </div>
    </div>
</div>

吐司通知组件

使用 Glassmorphism 设计的响应式 Toast 通知组件，具有单色配色方案、深色模式支持，并可在产品组合中使用。

打开预览

                <div class="fixed bottom-5 right-5 space-y-4 z-50">
    <!-- Toast Notification 1 -->
    <div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
        <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
            <div class="flex-1">
                <h2 class="text-gray-900 dark:text-gray-100 font-semibold">New Project Alert</h2>
                <p class="text-gray-700 dark:text-gray-300">You have successfully created a new project!</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">Just now</span>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>
    </div>
    <!-- Toast Notification 2 -->
    <div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
        <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
            <div class="flex-1">
                <h2 class="text-gray-900 dark:text-gray-100 font-semibold">Portfolio Updated</h2>
                <p class="text-gray-700 dark:text-gray-300">Your portfolio has been successfully updated!</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">5 mins ago</span>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>
    </div>
</div>

媒体嵌入组件

响应式媒体嵌入组件，支持深色主题、复杂布局和互补配色方案，专为仪表板设计。

打开预览

                <div class="container mx-auto p-6 bg-gray-900 text-gray-200">
  <div class="flex flex-wrap -mx-4">
    <div class="w-full lg:w-2/3 px-4 mb-6 lg:mb-0">
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <div class="relative" style="padding-top: 56.25%;">
          <iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-screen" allowfullscreen></iframe>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-3 text-teal-400 dark:text-teal-500">Video Title Here</h3>
          <p class="text-gray-400 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 text-gray-500 text-sm">
            <span><i class="far fa-eye mr-2"></i>1.2M Views</span>
            <span class="ml-4"><i class="far fa-comment mr-2"></i>3.5K Comments</span>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full lg:w-1/3 px-4">
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h4 class="text-lg font-semibold mb-4 text-orange-400 dark:text-orange-500">Related Content</h4>
        <ul>
          <li class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1018/60/60" alt="Related Video Thumbnail">
            <div>
              <p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Related Video Title</p>
              <p class="text-gray-500 text-sm">Channel Name</p>
            </div>
          </li>
          <li class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1015/60/60" alt="Related Video Thumbnail">
            <div>
              <p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Another Related Video</p>
              <p class="text-gray-500 text-sm">Another Channel</p>
            </div>
          </li>
           <li class="flex items-center">
            <img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1019/60/60" alt="Related Video Thumbnail">
            <div>
              <p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Yet Another Video</p>
              <p class="text-gray-500 text-sm">Yet Another Channel</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

跳至内容链接

用于辅助功能的“跳至内容”链接组件，专为具有灰度配色方案的深色模式仪表板而设计。由于响应式和深色模式样式，它比较复杂。不使用 JavaScript。使用带有 dark：前缀的 Tailwind CSS 来支持深色主题。

打开预览

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:bg-gray-800 focus:text-white focus:p-3 focus:underline dark:focus:bg-gray-900 dark:focus:text-gray-200">Skip to Content</a>

密码重置组件

一个极简和扁平设计的密码重置组件，采用自然色调，响应式设计，并支持暗主题，旨在为博客内容量身定制。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Reset Password</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Enter your email address to receive a link to create a new password.</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
                <input type="email" id="email" class="bg-gray-100 dark:bg-gray-700 border rounded-lg w-full h-12 px-4 focus:outline-none focus:ring focus:ring-green-300" required>
            </div>
            <button type="submit" class="w-full bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-300">Send Reset Link</button>
        </form>
        <div class="mt-6 text-center">
            <p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Login here</a></p>
        </div>
    </div>
</div>

360°查看组件

一个采用材料设计原则设计的简单 360° 观看组件，使用生动的颜色和暗主题支持，适合用于作品展示。

打开预览

                <div class="flex flex-col items-center justify-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition duration-300 ease-in-out">
  <h1 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">360° Viewer Component</h1>
  <div class="relative w-full h-80 overflow-hidden rounded-lg shadow-md">
    <img src="https://picsum.photos/seed/viewer1/400/300" alt="360° View" class="w-full h-full object-cover transition-transform duration-700 ease-in-out" />
    <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-lg">
      <span class="text-white text-lg">Swipe to view</span>
    </div>
  </div>
  <p class="mt-4 text-gray-700 dark:text-gray-300">Showcase your work or products beautifully.</p>
  <div class="flex space-x-4 mt-6">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg dark:border-gray-800" />
    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg dark:border-gray-800" />
    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg dark:border-gray-800" />
  </div>
</div>

新形态电商轮播滑块

一个响应式新拟态轮播滑块组件，支持暗主题，适用于电子商务，使用 Tailwind CSS。它具有互补的颜色方案。不使用 JavaScript。

打开预览

                <div class="flex items-center justify-center w-full h-full py-24 sm:py-8 px-4">
    <div class="w-full relative flex items-center justify-center">
        <button aria-label="slide backward" class="absolute z-30 left-0 ml-10 focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 cursor-pointer" id="prev">
            <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7 1L1 7L7 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
        <div class="w-full h-full mx-auto overflow-x-hidden overflow-y-hidden">
            <div id="slider" class="h-full flex lg:gap-8 md:gap-6 gap-14 items-center justify-start transition ease-out duration-700">
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                 <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button aria-label="slide forward" class="absolute z-30 right-0 mr-10 focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" id="next">
            <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L7 7L1 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
    </div>
</div>

玻璃化导航组件

一个用于电子商务网站的玻璃摩尔风格导航组件，具有单色彩色、响应式设计和使用 Tailwind CSS 的暗模式支持。

打开预览

                <nav class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-lg md:flex md:justify-between md:items-center py-4 px-6 fixed w-full z-10 dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
    <div class="flex justify-between items-center">
        <a href="#" class="text-gray-700 text-xl font-bold md:text-2xl dark:text-white">Your Logo</a>
        <div class="flex md:hidden">
            <button type="button" class="text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-gray-200 dark:hover:text-white">
                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                    <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
                </svg>
            </button>
        </div>
    </div>

    <div class="hidden md:flex flex-col md:flex-row md:mx-6">
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Home</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Shop</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Categories</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Contact</a>
    </div>

    <div class="relative hidden md:block">
        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </span>

        <input type="text" class="w-full border rounded-md pl-10 pr-4 py-2 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white" placeholder="Search">
    </div>
</nav>

列组件

响应式列组件，采用玻璃摩尔风格，三元色彩方案，适合商业/企业用途的简单复杂程度，包含暗模式支持。

打开预览

                 responsibly written html code with tailwind classes which apply Glassmorphism style, Triadic color scheme, Simple complexity level, includes dark mode support, is responsive, and uses picsum.photos or randomuser.me if needed.

加载器组件

一个为暗模式设计的响应式加载器组件，具有地球色调和适度复杂性，适合展示作品集。

打开预览

                <div class="min-h-screen flex flex-col items-center justify-center bg-gray-900 text-gray-100">
    <h1 class="text-3xl font-bold mb-6">Loading...</h1>
    <div class="flex space-x-4">
        <!-- Loader 1 -->
        <div class="flex flex-col items-center">
            <div class="w-16 h-16 rounded-full bg-earth-700 animate-bounce">  
                <img class="w-full h-full rounded-full" src="https://picsum.photos/seed/1/100" alt="Loading Image 1">
            </div>
            <p class="mt-2">Loading content...</p>
        </div>
        
        <!-- Loader 2 -->
        <div class="flex flex-col items-center">
            <div class="w-16 h-16 rounded-full bg-earth-600 animate-bounce">  
                <img class="w-full h-full rounded-full" src="https://picsum.photos/seed/2/100" alt="Loading Image 2">
            </div>
            <p class="mt-2">Almost there...</p>
        </div>
        
        <!-- Loader 3 -->
        <div class="flex flex-col items-center">
            <div class="w-16 h-16 rounded-full bg-earth-500 animate-bounce">  
                <img class="w-full h-full rounded-full" src="https://picsum.photos/seed/3/100" alt="Loading Image 3">
            </div>
            <p class="mt-2">Just a moment...</p>
        </div>
    </div>
    <div class="mt-8 p-4 rounded-lg bg-gray-800 shadow-lg">
        <h2 class="text-xl font-semibold">Featured Projects</h2>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/4/500/300" alt="Project 1" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 1</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/5/500/300" alt="Project 2" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 2</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/6/500/300" alt="Project 3" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 3</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/7/500/300" alt="Project 4" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 4</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
        </div>
    </div>
</div>

1 ... 271 272 273 274 275 ... 335