搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

Neumorphic 下拉菜单

社交媒体的 Neumorphic 下拉菜单，具有鲜艳的色彩和深色模式支持。

                <div class="relative inline-block text-left">
  <button class="flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-br from-purple-400 to-indigo-600 shadow-neumorphic-light dark:shadow-neumorphic-dark focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
  </button>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-gradient-to-br from-purple-400 to-indigo-600 dark:from-gray-700 dark:to-gray-900 ring-1 ring-black ring-opacity-5 divide-y divide-purple-300 dark:divide-gray-600 focus:outline-none">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Profile</a>
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Settings</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Notifications</a>
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Messeges</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-purple-500 hover:text-white dark:text-gray-200 dark:hover:bg-gray-800">Logout</a>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #9d7df5, -6px -6px 12px #c9a7ff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #333333, -6px -6px 12px #666666;
  }
</style>

Glassmorphism 警报消息

Glassmorphism Alert Message Component 具有三色配色方案和简单布局，专为投资组合设计，具有响应式设计和深色模式支持。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md p-6 bg-white rounded-lg shadow-lg bg-opacity-30 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-30">
    <div class="absolute inset-0 rounded-lg -z-10 bg-gradient-to-br from-blue-300 via-purple-300 to-pink-300 opacity-60 dark:from-blue-700 dark:via-purple-700 dark:to-pink-700"></div>
    <div class="flex items-center space-x-4">
      <div class="flex items-center justify-center flex-shrink-0 w-10 h-10 text-white bg-blue-500 rounded-full dark:bg-blue-600">
        <svg class="w-6 h-6" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">New Portfolio Update!</h3>
        <p class="text-sm text-gray-600 dark:text-gray-200">Check out my latest projects and redesigned sections. Your feedback is highly appreciated!</p>
      </div>
    </div>
    <div class="flex justify-end mt-4">
      <button class="px-4 py-2 text-sm font-medium text-blue-800 bg-blue-100 rounded-md bg-opacity-70 dark:text-blue-200 dark:bg-blue-700 dark:bg-opacity-70">View Details</button>
      <button class="ml-2 px-4 py-2 text-sm font-medium text-gray-800 bg-gray-100 rounded-md bg-opacity-70 dark:text-gray-200 dark:bg-gray-700 dark:bg-opacity-70">Dismiss</button>
    </div>
  </div>
</div>

粘滞导航组件

一个极简且响应迅速的博客粘性导航栏，具有充满活力的配色方案。它支持深色模式，并具有简单、干净的布局，左侧是 “Blog Title” ，右侧是导航链接。当用户滚动时，导航栏会粘在视区的顶部。

打开预览

                <nav class="bg-gradient-to-r from-teal-400 to-blue-500 dark:from-gray-800 dark:to-gray-900 p-4 shadow-md sticky top-0 z-50">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Blog Title -->
    <a href="#" class="text-white text-2xl font-bold dark:text-gray-100">Blog Title</a>

    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Home</a>
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Categories</a>
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">About</a>
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Contact</a>
    </div>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" 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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default, can be shown with JS) -->
  <div class="md:hidden mt-4 space-y-2">
    <!-- Hidden for this pure HTML example as JS is not allowed -->
  </div>
</nav>

Retro Media 嵌入组件

适用于商业/公司网站的 Retro/Vintage Media Embed Component，具有三色配色方案和响应式深色主题支持。

打开预览

                <div class="dark:bg-gray-900 bg-gray-100 p-8 min-h-screen flex items-center justify-center font-mono">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-600 transform -rotate-3 hover:rotate-0 transition-transform duration-300">
    <div class="relative" style="padding-bottom: 56.25%;">
      <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="p-6 bg-yellow-300 dark:bg-yellow-700 text-purple-800 dark:text-purple-200">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-xl font-bold">Rad Video Title</h3>
        <span class="text-sm">5:32</span>
      </div>
      <p class="text-sm mb-4">
        Get ready to groove with this tubular content! Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Vivamus interdum, sem quis dictum finibus, magna nisl bibendum felis. 
      </p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-purple-800 dark:border-purple-200 mr-3">
        <span class="text-sm font-semibold">Duke Silver</span>
      </div>
    </div>
  </div>
</div>

错误消息组件

错误消息使用 Tailwind CSS 的社交媒体组件，支持深色模式。

打开预览

                <div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-2xl font-bold text-white">Error</h2>
      <button class="text-gray-400 hover:text-white focus:outline-none">
        <svg class="w-6 h-6" 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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <div class="text-gray-300 mb-6">
      <p>Oops! Something went wrong. Please try again later.</p>
      <ul class="mt-4 list-disc list-inside">
        <li>Check your internet connection.</li>
        <li>Ensure you have the latest version of the app.</li>
        <li>Contact support if the issue persists.</li>
      </ul>
    </div>
    <div class="flex justify-end">
      <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
        Got it
      </button>
    </div>
  </div>
</div>

Pastel Badges 深色模式 UI

适用于商业网站的简单响应式徽章组件，具有深色模式 UI 和柔和的色彩。它使用 Tailwind CSS 设计，使用深色背景来减少眼睛疲劳并支持响应式布局。

打开预览

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
  <span class="px-3 py-1 text-sm font-medium text-purple-800 bg-purple-200 rounded-full dark:bg-purple-700 dark:text-purple-100">
    Business
  </span>
  <span class="px-3 py-1 text-sm font-medium text-green-800 bg-green-200 rounded-full dark:bg-green-700 dark:text-green-100">
    Corporate
  </span>
  <span class="px-3 py-1 text-sm font-medium text-blue-800 bg-blue-200 rounded-full dark:bg-blue-700 dark:text-blue-100">
    Innovation
  </span>
  <span class="px-3 py-1 text-sm font-medium text-pink-800 bg-pink-200 rounded-full dark:bg-pink-700 dark:text-pink-100">
    Strategy
  </span>
  <span class="px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-200 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
    Growth
  </span>
</div>

媒体组件 Component Component

社交媒体的 3D 媒体组件，具有互补的配色方案、适度的复杂度和深色主题支持。

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex justify-center items-center p-4">
  <div class="bg-gradient-to-br from-blue-400 to-indigo-500 dark:from-blue-700 dark:to-indigo-900 rounded-3xl shadow-2xl p-6 lg:p-10 transform rotate-y-12 hover:rotate-y-0 transition-transform duration-700 ease-in-out relative overflow-hidden max-w-lg w-full">
    <!-- 3D elements for depth -->
    <div class="absolute top-0 left-0 w-full h-full bg-black opacity-10 rounded-3xl transform translateZ(-10px)"></div>
    <div class="absolute bottom-0 right-0 w-full h-full bg-white opacity-10 rounded-3xl transform translateZ(-20px)"></div>

    <div class="relative z-10">
      <div class="flex items-center mb-6">
        <img class="w-16 h-16 rounded-full border-4 border-amber-300 dark:border-amber-500 shadow-lg transform translateZ(15px)" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
        <div class="ml-4">
          <p class="text-white text-xl font-bold transform translateZ(10px)">John Doe</p>
          <p class="text-amber-200 dark:text-amber-400 text-sm transform translateZ(10px)">@john_doe_official</p>
        </div>
      </div>

      <div class="relative w-full h-64 rounded-xl overflow-hidden shadow-xl mb-6 transform translateZ(5px)">
        <img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=1" alt="Post Image">
        <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300">
          <svg class="h-16 w-16 text-white" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </div>
      </div>

      <p class="text-white text-lg mb-6 leading-relaxed transform translateZ(10px)">
        Excited to share my latest project! It was a challenging but rewarding experience. #webdesign #creative #tailwindcss
      </p>

      <div class="flex justify-between items-center text-white">
        <div class="flex items-center space-x-4">
          <div class="flex items-center transform translateZ(8px)">
            <svg class="h-8 w-8 text-red-300 dark:text-red-500" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
            <span class="ml-1 text-lg">2.5K</span>
          </div>
          <div class="flex items-center transform translateZ(8px)">
            <svg class="h-8 w-8 text-green-300 dark:text-green-500" fill="currentColor" viewBox="0 0 24 24">
              <path d="M18 16.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6 16.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM20 8H4V6h16v2zm0 3H4V9h16v2zm0 3H4v-2h16v2z"/>
            </svg>
            <span class="ml-1 text-lg">450</span>
          </div>
        </div>
        <button class="bg-amber-400 hover:bg-amber-500 text-gray-800 font-bold py-3 px-6 rounded-full shadow-lg transform translateZ(8px) hover:scale-105 transition duration-300">
          Share
        </button>
      </div>
    </div>
  </div>
</div>

站点地图组件

一个简单、充满活力的 3D 风格站点地图组件，用于投资组合，具有响应式设计和使用 Tailwind CSS 的深色模式支持。

打开预览

                
<div class="dark:bg-gray-900 bg-gray-100 p-8 min-h-screen">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold mb-8 text-center dark:text-white text-gray-800">Site Map</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Section 1: About Me -->
      <div class="bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-purple-700 dark:to-pink-700">
        <h2 class="text-2xl font-semibold mb-4 text-white">About Me</h2>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-purple-200 transition-colors duration-200 block">Introduction</a></li>
          <li><a href="#" class="text-white hover:text-purple-200 transition-colors duration-200 block">Skills</a></li>
          <li><a href="#" class="text-white hover:text-purple-200 transition-colors duration-200 block">Experience</a></li>
        </ul>
      </div>

      <!-- Section 2: Portfolio -->
      <div class="bg-gradient-to-br from-green-400 to-blue-500 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-green-600 dark:to-blue-600">
        <h2 class="text-2xl font-semibold mb-4 text-white">Portfolio</h2>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-green-100 transition-colors duration-200 block">Web Design</a></li>
          <li><a href="#" class="text-white hover:text-green-100 transition-colors duration-200 block">Graphic Design</a></li>
          <li><a href="#" class="text-white hover:text-green-100 transition-colors duration-200 block">Photography</a></li>
        </ul>
      </div>

      <!-- Section 3: Blog -->
      <div class="bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-yellow-600 dark:to-orange-600">
        <h2 class="text-2xl font-semibold mb-4 text-white">Blog</h2>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-yellow-100 transition-colors duration-200 block">Latest Posts</a></li>
          <li><a href="#" class="text-white hover:text-yellow-100 transition-colors duration-200 block">Categories</a></li>
          <li><a href="#" class="text-white hover:text-yellow-100 transition-colors duration-200 block">Archive</a></li>
        </ul>
      </div>

      <!-- Section 4: Services (Example) -->
      <div class="bg-gradient-to-br from-red-500 to-orange-600 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-red-700 dark:to-orange-700">
        <h2 class="text-2xl font-semibold mb-4 text-white">Services</h2>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-red-200 transition-colors duration-200 block">Consulting</a></li>
          <li><a href="#" class="text-white hover:text-red-200 transition-colors duration-200 block">Development</a></li>
          <li><a href="#" class="text-white hover:text-red-200 transition-colors duration-200 block">Support</a></li>
        </ul>
      </div>

      <!-- Section 5: Contact -->
      <div class="bg-gradient-to-br from-blue-600 to-indigo-700 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-blue-800 dark:to-indigo-800">
        <h2 class="text-2xl font-semibold mb-4 text-white">Contact</h2>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-blue-200 transition-colors duration-200 block">Get in Touch</a></li>
          <li><a href="#" class="text-white hover:text-blue-200 transition-colors duration-200 block">Social Media</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

CAPTCHA 组件

一个简单的 CAPTCHA 组件，采用深色模式灰度设计，针对博客和内容网站的可读性进行了优化。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
    <div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-sm w-full border border-gray-700">
        <h2 class="text-2xl font-bold text-white mb-6 text-center">Verify you are not a robot</h2>
        <div class="flex items-center justify-between bg-gray-700 p-4 rounded-md mb-6">
            <img src="https://picsum.photos/120/50?grayscale&blur=1" alt="CAPTCHA image" class="rounded">
            <button class="bg-gray-600 text-white p-2 rounded-md hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
                <svg class="w-5 h-5" 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16v1m7-11h-1.582a2 2 0 00-1.581 2.946L8 15.5m7-7h2.414.582m-15.356-2A8.001 8.001 0 004 16v1m7-11h-1.582a2 2 0 00-1.581 2.946L8 15.5m7-7h2.414.582"></path></svg>
            </button>
        </div>
        <div class="mb-6">
            <input type="text" placeholder="Enter the text from the image" class="form-input w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-transparent">
        </div>
        <button class="w-full bg-gray-600 text-white p-3 rounded-md font-semibold hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Submit
        </button>
    </div>
</div>

拟物化会话超时警报

一个简单的拟物化风格的会话超时警报组件，具有灰度颜色，专为博客/内容网站设计。它包括响应式设计和深色模式支持。

打开预览

                <div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center p-4 z-50 dark:bg-opacity-75">
  <div class="bg-gray-100 dark:bg-gray-800 p-8 rounded-lg shadow-xl border-t-4 border-gray-300 dark:border-gray-700 max-w-sm mx-auto transform transition duration-300 hover:scale-105">
    <div class="flex flex-col items-center">
      <div class="text-5xl mb-4" role="img" aria-label="Clock Icon">⏳</div>
      <h2 class="text-2xl font-bold mb-2 text-gray-800 dark:text-gray-100">Session Expiring!</h2>
      <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Your session is about to expire due to inactivity. Please click

1 ... 127 128 129 130 131 ... 335