类别

所有组件

浏览所有可用的 Tailwind CSS 组件

加入购物车按钮

一个3D设计的添加到购物车按钮组件，具有响应式效果和深色主题支持，使用 Tailwind CSS。

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative group">
        <button class="relative px-6 py-2 font-bold text-white transition-transform duration-300 bg-blue-600 rounded-lg shadow-lg transform hover:scale-105 active:scale-95 dark:bg-blue-700">
            <span class="absolute top-0 left-0 w-full h-full rounded-lg bg-blue-500 opacity-60 transition-opacity duration-300 group-hover:opacity-100"></span>
            <span class="relative z-10">Add to Cart</span>
        </button>
        <div class="absolute right-0 -top-1 -mr-4 z-0 w-10 h-10 bg-blue-200 rounded-full shadow-lg transform scale-75 transition-all duration-300 group-hover:scale-100"></div>
    </div>
</div>

极简主义过滤器组件

一个具有高对比度、大胆排版和不寻常间距的野兽派风格过滤器组件。它包括复选框、单选按钮和价格范围滑块。响应式效果通过媒体查询和流体单位实现。深色模式通过 CSS 支持。

打开预览

                <div class='bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white p-6 max-w-sm mx-auto font-mono'>

拟物化社交分享按钮

一套使用拟物设计风格的社交分享按钮，使用 Tailwind CSS。具有渐变、阴影及悬停/激活效果来模拟物理按钮。该组件是响应式的，并通过 CSS 包含深色模式支持。包含 Facebook、Twitter、LinkedIn 和通用复制链接按钮。

打开预览

                <div class="flex flex-wrap gap-4 p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl">
  <!-- Facebook Button -->
  <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-blue-500 to-blue-700 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-blue-700 dark:to-blue-900 dark:shadow-blue-900/50 dark:hover:shadow-blue-900/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"></path></svg>
    Share on Facebook
  </a>

  <!-- Twitter Button -->
  <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-cyan-400 to-cyan-600 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-cyan-600 dark:to-cyan-800 dark:shadow-cyan-800/50 dark:hover:shadow-cyan-800/70">
     <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26L21.69 17.25h-2.918l-5.451-5.66L8.29 17.25H1.997l7.226-8.26L2.1 2.25h3.308l5.249 5.4l5.45-5.4zM18.088 19.5H22V17.25h-1.774c-.381 0-.736-.188-.958-.548l-3.296-5.15h-2.35l4.739 7.4H18.088zM6.667 5.5c-.381 0-.736.188-.958.548L2.413 11.2h2.35l4.74-7.4zm13.5-3.25z"></path></svg>
    Share on Twitter
  </a>

   <!-- LinkedIn Button -->
   <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-blue-700 to-blue-900 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-blue-900 dark:to-blue-950 dark:shadow-blue-950/50 dark:hover:shadow-blue-950/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 0H2v24h20V0zM8 19H5V8h3v11zM6.5 6.31C5.55 6.31 4.8 5.56 4.8 4.6S5.55 2.9 6.5 2.9s1.7 0.76 1.7 1.7S7.45 6.31 6.5 6.31zm15.5 12.69h-3v-5.6c0-1.3-.5-2.6-2-2.6-1.2 0-2 0.8-2 2v5.6h-3V8h3v1.5c0.5-0.8 1.6-1.5 3-1.5 2.5 0 4 1.6 4 5.8v6.2z"></path></svg>
    Share on LinkedIn
  </a>

  <!-- Generic Share Button (Copy Link) -->
   <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-teal-500 to-teal-700 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-teal-700 dark:to-teal-900 dark:shadow-teal-900/50 dark:hover:shadow-teal-900/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 16.685v-5.008l4-3.997-4-3.997v-5.008h-8v5.005l4 3.994-4 3.994v5.005h8z m-6-1.769v-5.005l-4-3.994 4-3.994v-5.005h-8v5.008l4 3.997-4 3.997v5.008h8z"></path></svg>
    Copy Link
  </a>
</div>

进度指示器组件

一个复古/复古风格的进度指示器组件，使用 Tailwind CSS 具有响应式效果和深色主题支持。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">
        Retro Progress Indicators
    </h1>
    <div class="w-full max-w-lg">
        <!-- Progress Bar -->
        <div class="mb-6">
            <div class="relative pt-1">
                <div class="flex mb-2 items-center justify-between">
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Loading...</div>
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">80%</div>
                </div>
                <div class="flex h-2 mb-4 bg-gray-200 rounded dark:bg-gray-700">
                    <div class="bg-yellow-500 h-full rounded" style="width: 80%"></div>
                </div>
            </div>
        </div>
        <!-- Circular Progress Indicator -->
        <div class="flex items-center justify-center mb-6">
            <div class="relative w-24 h-24">
                <img src="https://picsum.photos/seed/circularprogress/300/300" class="rounded-full shadow-lg" alt="Circular Progress" /> 
                <div class="absolute inset-0 flex items-center justify-center text-xl font-bold text-yellow-500">
                    80%
                </div>
            </div>
        </div>
        <!-- Step Indicators -->
        <div class="flex justify-between w-full text-center">
            <div>
                <div class="w-4 h-4 bg-yellow-500 rounded-full mx-auto mb-2"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 1</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 2</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 3</div>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-full w-16 h-16" alt="User Avatar" />
        <div class="text-center mt-2 text-sm text-gray-600 dark:text-gray-300">John Doe</div>
    </div>
</div>

热图组件

一个采用玻璃形态效果设计的响应式热图组件，具有像磨砂玻璃一样的半透明元素，并支持深色主题样式，利用 Tailwind CSS。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-lg rounded-xl shadow-lg p-6 md:w-1/2 w-full">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Component</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/200" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/201" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/202" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/203" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                <p class="text-gray-800 dark:text-gray-200 font-medium">User 1</p>
            </div>
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                <p class="text-gray-800 dark:text-gray-200 font-medium">User 2</p>
            </div>
        </div>
    </div>
</div>

页脚导航组件

一个以80年代和90年代美学为灵感设计的复古/复古风格的页脚导航组件。它具有深色主题支持，并且完全响应式。

打开预览

                <footer class="bg-gray-800 text-white py-8 mt-10">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="text-center md:text-left">
            <h2 class="text-2xl font-bold mb-2">Stay Connected!</h2>
            <p>Follow us on our social media channels:</p>
            <div class="flex justify-center md:justify-start mt-4 space-x-4">
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full">
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full">
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=3" alt="Instagram" class="rounded-full">
                </a>
            </div>
        </div>
        <nav class="mt-6 md:mt-0">
            <ul class="flex flex-col md:flex-row space-x-4">
                <li><a href="#" class="hover:text-gray-400 transition">Home</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">About</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">Services</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="text-center mt-6">
        <p class="text-gray-500 text-sm">&copy; 2023 Your Company. All rights reserved.</p>
    </div>
</footer>

地图组件

一个响应式地图组件，采用 Material Design 样式和深色主题支持，使用 Tailwind CSS 构建。

打开预览

                <div class="h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
  <!-- Header -->
  <header class="bg-white dark:bg-gray-800 shadow-md">
    <div class="container mx-auto px-4 py-4 flex items-center justify-between">
      <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Maps</h1>
      <nav>
        <ul class="flex space-x-4">
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Explore</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Saved</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contribute</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Main Content -->
  <main class="flex-grow container mx-auto px-[10px] py-4 grid grid-cols-1 md:grid-cols-3 gap-4">
    <!-- Map Area (Placeholder) -->
    <section class="md:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <div class="h-[400px] bg-gray-300 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-300">
        Map will be loaded here
      </div>
    </section>

    <!-- Sidebar/Details Area -->
    <aside class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Location Details</h2>
      <div class="space-y-4">
        <!-- Example Detail Item -->
        <div class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">I</div>
          <p class="text-gray-700 dark:text-gray-300">Information about the location.</p>
        </div>
        <div class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">P</div>
          <p class="text-gray-700 dark:text-gray-300">Photos and imagery here.</p>
        </div>
        <div class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-10 h-10 bg-red-500 rounded-full flex items-center justify-center text-white font-bold">R</div>
          <p class="text-gray-700 dark:text-gray-300">Reviews and ratings go here.</p>
        </div>
      </div>
    </aside>
  </main>

  <!-- Footer -->
  <footer class="bg-white dark:bg-gray-800 shadow-md mt-4">
    <div class="container mx-auto px-4 py-4 text-center text-gray-600 dark:text-gray-300">
      © 2023 Maps Component
    </div>
  </footer>
</div>

带深色模式的玻璃质感侧边栏

一个响应式侧边栏组件，采用玻璃形态设计和深色模式支持，使用 Tailwind CSS。它包括一个logo、站点名称、导航链接和用户个人资料部分。

打开预览

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Glassmorphism Sidebar -->
  <div class="flex flex-col w-64 bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg dark:backdrop-blur-lg shadow-xl dark:shadow-2xl">
    <div class="flex items-center justify-center h-16">
      <!-- Logo and Site Name -->
      <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-white text-lg font-semibold">AppName</span>
    </div>
    <div class="flex flex-col flex-1 overflow-y-auto">
      <nav class="flex-1 px-2 py-4">
        <!-- Navigation Links -->
        <a href="#" class="flex items-center px-4 py-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H9m2-13V9a1 1 0 011-1h2a1 1 0 011 1v3m-7 7h7"></path>
          </svg>
          Dashboard
        </a>
        <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M12 20.646A17.938 17.938 0 015 10H4c0 2.761 3.582 5 8 5s8-2.239 8-5h-1c-7.033 0-10.95.51-11.297 1.702l-.155.595A1.99 1.99 0 015 15l-.155.595A1.99 1.99 0 008 19.646z"></path>
          </svg>
          Users
        </a>
        <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2m14 0V9a2 2 0 00-2-2H7a2 2 0 00-2 2v2m7 7v-4"></path>
          </svg>
          Products
        </a>
        <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c1.03-.523 2.175-.956 3.402-.956C15.463 3.361 17.5 5.252 17.5 7.5c0 2.249-2.037 4.138-4.275 4.138C11.215 11.638 10 10.457 10 8.952c0-1.486 1.184-2.652 2.618-2.652a4.06 4.06 0 013.162 1.4zM2.875 18.25h-.32C1.918 18.25 2 18.11 2 17.75c0-1.376 2.13-2.875 4.95-2.875 1.678 0 3.074.406 3.99-.94.791-1.223 2.093-1.844 3.455-1.844A5.42 5.42 0 0120.5 15.25c0 2.892-4.243 5.25-9.25 5.25-3.095 0-5.732-.919-7.166-2.42l-.224-.224z"></path>
          </svg>
          Settings
        </a>
      </nav>
    </div>
    <!-- User Profile Section -->
    <div class="flex items-center p-4 border-t border-gray-300 dark:border-gray-700">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10 mr-3">
      <div class="flex flex-col">
        <span class="text-gray-800 dark:text-white text-sm font-semibold">John Doe</span>
        <span class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</span>
      </div>
    </div>
  </div>
  <!-- Main Content (optional - for demonstration) -->
  <div class="flex flex-col flex-1 p-4 overflow-y-auto">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Main Content Area</h1>
    <p class="mt-4 text-gray-700 dark:text-gray-300">This is the main content area. The sidebar is positioned to the left.</p>
  </div>
</div>

Toast通知组件

一个具有拟物设计和深色模式支持的响应式 Toast 通知组件，使用 Tailwind CSS 构建。

打开预览

                <div class="fixed bottom-5 right-5 space-y-3">
  <!-- Success Toast -->
  <div class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow-xl dark:bg-gray-700 dark:border-gray-700">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-green-500" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </div>
    <div class="ml-3 text-sm font-normal text-gray-800 dark:text-gray-200">
      Successfully saved your settings.
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-700 dark:hover:bg-gray-600">
      <span class="sr-only">Close</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Error Toast -->
  <div class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow-xl dark:bg-gray-700 dark:border-gray-700">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-red-500" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </div>
    <div class="ml-3 text-sm font-normal text-gray-800 dark:text-gray-200">
      Something went wrong.
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-700 dark:hover:bg-gray-600">
      <span class="sr-only">Close</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Warning Toast -->
  <div class="flex items-center p-4 bg-white border border-gray-200 rounded-lg shadow-xl dark:bg-gray-700 dark:border-gray-700">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-yellow-500" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
    </div>
    <div class="ml-3 text-sm font-normal text-gray-800 dark:text-gray-200">
      Proceed with caution.
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-700 dark:hover:bg-gray-600">
      <span class="sr-only">Close</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>
</div>

复古社交分享按钮

一个社交分享按钮组件，采用复古设计，具有响应效果和黑暗主题支持，使用Tailwind CSS，无需JavaScript。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900" style="font-family: 'Press Start 2P', cursive;">
  <div class="flex space-x-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-retro">
    <a href="#" class="share-button facebook">
      <img src="https://img.icons8.com/fluent/48/000000/facebook-new.png" alt="Facebook" class="w-8 h-8">
    </a>
    <a href="#" class="share-button twitter">
      <img src="https://img.icons8.com/fluent/48/000000/twitter.png" alt="Twitter" class="w-8 h-8">
    </a>
    <a href="#" class="share-button instagram">
      <img src="https://img.icons8.com/fluent/48/000000/instagram.png" alt="Instagram" class="w-8 h-8">
    </a>
    <a href="#" class="share-button pinterest">
      <img src="https://img.icons8.com/fluent/48/000000/pinterest.png" alt="Pinterest" class="w-8 h-8">
    </a>
  </div>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

    .shadow-retro {
        box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
    }

    .dark .shadow-retro {
        box-shadow: 8px 8px 0px rgba(255, 255, 255, 0.2);
    }

    .share-button {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem;
      border-radius: 0.5rem;
      transition: all 0.3s ease;
      border: 2px solid #000;
    }

     .dark .share-button {
        border: 2px solid #fff;
     }

    .share-button:hover {
      transform: translateY(-5px);
      box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
    }

    .dark .share-button:hover {
        box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.3);
    }

    .facebook {
      background-color: #4267B2;
    }
    .twitter {
      background-color: #1DA1F2;
    }
    .instagram {
      background-color: #E1306C;
    }
    .pinterest {
      background-color: #BD081C;
    }
  </style>
</div>

1 ... 216 217 218 219 220 ... 262