搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

媒体组件 Component Component

用于电子商务的媒体组件，具有微交互、灰度配色方案、中等复杂性、响应式设计和深色主题支持。

                <div class="max-w-xs mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
  <div class="relative">
    <img class="object-cover w-full h-48 transition-transform duration-300 transform group-hover:scale-105" src="https://picsum.photos/400/300?random=1"
      alt="Product Image">
    <div
      class="absolute top-0 left-0 flex items-center justify-center w-full h-full text-white transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
      <svg class="w-12 h-12" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
        </path>
      </svg>
    </div>
  </div>
  <div class="px-4 py-3">
    <h3 class="text-lg font-medium text-gray-800 dark:text-white">Product Name</h3>
    <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Short product description goes here.</p>
    <div class="flex items-center justify-between mt-3">
      <span class="text-xl font-bold text-gray-800 dark:text-white">$29.99</span>
      <button
        class="px-3 py-2 text-xs font-medium text-white uppercase transition-colors duration-300 transform bg-gray-800 rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600">
        Add to Cart
      </button>
    </div>
  </div>
</div>

Glassmorphism 音频播放器

Glassmorphism 音频播放器，仪表板色彩鲜艳，响应式暗模式支持。无 JavaScript。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4">
  <div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg max-w-sm w-full border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-20">
    <div class="flex items-center space-x-4 mb-4">
      <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/id/1040/80/80" alt="Album Art">
      <div class="flex-1">
        <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Ocean Waves</h3>
        <p class="text-sm text-purple-700 dark:text-purple-300">Relaxation Sounds</p>
      </div>
    </div>
    <div class="relative mb-4">
      <div class="w-full bg-purple-200 rounded-full h-2 dark:bg-gray-600">
        <div class="bg-gradient-to-r from-indigo-500 to-pink-500 h-2 rounded-full" style="width: 70%;"></div>
      </div>
      <div class="flex justify-between text-xs text-purple-800 dark:text-purple-200 mt-1">
        <span>2:10</span>
        <span>3:05</span>
      </div>
    </div>
    <div class="flex items-center justify-center space-x-6">
      <button class="text-purple-800 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 5V.3c-4.9 1.1-8.5 5.7-8.5 11.2s3.6 10.1 8.5 11.2V19c-3.7 0-6.7-3-6.7-6.7S8.3 5.3 12 5zm0 14c3.9 0 7-3.1 7-7s-3.1-7-7-7v14zM16 12c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4z"></path>
        </svg>
      </button>
      <button class="bg-gradient-to-r from-indigo-600 to-pink-600 text-white p-3 rounded-full shadow-lg focus:outline-none transform hover:scale-105 transition duration-300">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M8 5v14l11-7z"></path>
        </svg>
      </button>
      <button class="text-purple-800 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 5V.3c-4.9 1.1-8.5 5.7-8.5 11.2s3.6 10.1 8.5 11.2V19c-3.7 0-6.7-3-6.7-6.7S8.3 5.3 12 5zm0 14c3.9 0 7-3.1 7-7s-3.1-7-7-7v14zM16 12c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

User Mentions 组件

响应式 User Mentions 组件，具有 Glassmorphism 设计、互补配色方案和深色模式支持，适用于商业网站。

打开预览

                <div class="min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex items-center justify-center">
  <div class="backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 rounded-xl p-6 w-full max-w-sm border border-white border-opacity-30 dark:border-gray-700 shadow-lg">
    <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 text-center">User Mentions</h3>
    <div class="space-y-4">
      
      <div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-white dark:text-gray-100">John Doe <span class="text-sm text-gray-100 dark:text-gray-300">(CEO)</span></p>
          <p class="text-sm text-gray-50 dark:text-gray-400">Mentioned you in a project update.</p>
        </div>
      </div>

      <div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-white dark:text-gray-100">Jane Smith <span class="text-sm text-gray-100 dark:text-gray-300">(Designer)</span></p>
          <p class="text-sm text-gray-50 dark:text-gray-400">Asked your opinion on a new design.</p>
        </div>
      </div>

      <div class="flex items-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-3 shadow-md border border-white border-opacity-20 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-white dark:border-gray-400" src="https://randomuser.me/api/portraits/men/18.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-white dark:text-gray-100">Robert Brown <span class="text-sm text-gray-100 dark:text-gray-300">(Developer)</span></p>
          <p class="text-sm text-gray-50 dark:text-gray-400">Assigned you a task in Jira.</p>
        </div>
      </div>

    </div>
  </div>
</div>

密码重置组件

用于社交媒体的拟物化密码重置组件，具有相似的配色方案和深色模式支持。

打开预览

                <div class="min-h-screen py-6 flex flex-col justify-center sm:py-12 bg-gradient-to-br from-blue-100 via-blue-200 to-cyan-100 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-cyan-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl dark:from-gray-700 dark:to-gray-900"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-gray-800">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Password Reset</h1>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-700">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7 dark:text-gray-200">
            <p>Enter your email to receive a password reset link.</p>
            <div class="relative">
              <input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-gray-100 dark:focus:border-blue-500" placeholder="Email address" />
              <label for="email" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Email Address</label>
            </div>
            <div class="relative">
              <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 shadow-md">Reset Password</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Retro_Back_To_Top_Button

Retro/Vintage - 怀旧的返回顶部按钮组件，用于博客/内容使用，具有类似的配色方案。具有响应式和深色模式支持的复杂设计。

打开预览

                <div class="fixed bottom-5 right-5">
  <a href="#"
    class="group flex items-center justify-center p-4 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 text-white shadow-lg transform transition-all duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:from-purple-700 dark:via-pink-700 dark:to-red-700 dark:focus:ring-purple-800"
    aria-label="Back to top">
    <svg class="h-8 w-8 transition-transform duration-300 group-hover:-translate-y-1" 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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
  </a>
</div>

双重身份验证组件

Glassmorphism Dashboard的双重身份验证组件，具有互补的配色方案和深色模式支持。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-dark to-purple-light dark:from-gray-900 dark:to-black">
  <div class="relative p-8 rounded-xl shadow-lg bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg border border-opacity-20 border-white max-w-md w-full mx-4">
    <div class="absolute inset-0 bg-white bg-opacity-5 dark:bg-black dark:bg-opacity-5 rounded-xl pointer-events-none"></div>
    
    <h2 class="text-3xl font-bold text-white mb-6 text-center">🔐 Two-Factor Authentication</h2>
    
    <p class="text-white text-opacity-80 mb-8 text-center">Please enter the 6-digit code from your authenticator app.</p>
    
    <div class="flex justify-center space-x-4 mb-8">
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
    </div>
    
    <button class="w-full py-3 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-semibold text-lg transition duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-70 dark:bg-purple-700 dark:hover:bg-purple-800">
      Verify Code
    </button>
    
    <p class="text-white text-opacity-70 text-center mt-6 text-sm">
      Didn

Glassmorphism Forms 组件

Glassmorphism 为博客/内容网站提供具有大地色调、响应式设计和深色主题的组件。

打开预览

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-stone-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-8 w-full max-w-md border border-stone-200 dark:border-stone-700">
    <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200 mb-6 text-center">Contact Us</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Name</label>
        <input type="text" id="name" name="name" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Email</label>
        <input type="email" id="email" name="email" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400">
      </div>
      <div class="mb-6">
        <label for="message" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Message</label>
        <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400"></textarea>
      </div>
      <button type="submit" class="w-full bg-stone-700 dark:bg-stone-600 text-white py-3 rounded-lg font-semibold hover:bg-stone-800 dark:hover:bg-stone-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 dark:focus:ring-stone-400">
        Send Message
      </button>
    </form>
  </div>
</div>

拟物化地图组件

一个简单的响应式地图组件，具有拟物化设计、大地色调配色方案和深色模式支持，适用于投资组合。

打开预览

                <div class="p-4 md:p-8 bg-gradient-to-br from-stone-200 to-stone-400 dark:from-stone-800 dark:to-stone-950 shadow-2xl rounded-3xl border-4 border-stone-500 dark:border-stone-700 max-w-4xl mx-auto my-8"> <div class="w-full h-64 md:h-96 rounded-2xl overflow-hidden border-2 border-stone-600 dark:border-stone-400 shadow-inner"> <img src="https://picsum.photos/seed/map/800/600" alt="Skeuomorphic Map" class="w-full h-full object-cover grayscale brightness-90 contrast-120"> </div> <div class="mt-6 text-center"> <h3 class="text-2xl md:text-3xl font-serif text-stone-800 dark:text-stone-200 drop-shadow-md">Location Details</h3> <p class="mt-2 text-md md:text-lg text-stone-700 dark:text-stone-300 font-sans">123 Rustic Road, Earthville</p> <button class="mt-5 px-6 py-3 bg-gradient-to-r from-amber-700 to-amber-900 text-white font-bold rounded-full shadow-lg hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50 transition transform hover:-translate-y-1 active:translate-y-0"> View Large Map </button> </div> <div class="mt-8 flex justify-around items-center px-4"> <div class="text-center"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-16 h-16 rounded-full mx-auto border-4 border-stone-600 dark:border-stone-400 shadow-md"> <p class="text-stone-700 dark:text-stone-300 text-sm mt-2"> Explorer </p> </div> <div class="text-center"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-16 h-16 rounded-full mx-auto border-4 border-stone-600 dark:border-stone-400 shadow-md"> <p class="text-stone-700 dark:text-stone-300 text-sm mt-2"> Cartographer </p> </div> </div> </div>

电子商务订单进度条

一个用于电子商务的响应式进度条组件，支持深色模式，采用单色设计。没有 JavaScript，只有 HTML 和 Tailwind CSS。

打开预览

                <div class="dark:bg-gray-900 min-h-screen p-4 flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Order Progress</h2>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Order Placed</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">100%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 100%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Processing</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">75%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 75%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Shipped</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">50%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Out for Delivery</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">25%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 25%;"></div>
      </div>
    </div>

    <div>
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Delivered</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">0%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%;"></div>
      </div>
    </div>
  </div>
</div>

SuccessMessagesComponent 组件

一个简单的电子商务成功消息组件，具有单色 Material Design 美学、响应式布局和深色主题支持。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-sm mx-auto">
    <div class="text-center">
      <div class="mb-4 text-green-500 mx-auto">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Order Confirmed!</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Your order #12345 has been successfully placed.</p>
      <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out">
        Continue Shopping
      </button>
    </div>
  </div>
</div>

1 ... 123 124 125 126 127 ... 335