类别

所有组件

浏览所有可用的 Tailwind CSS 组件

导航组件

一个复杂的导航组件，采用 3D 设计，适用于博客，具有三元配色方案和响应式深色主题支持。

                <nav class="bg-gray-800 p-5 shadow-lg rounded-lg relative overflow-hidden">
    <div class="absolute inset-0 transform -translate-x-2 -translate-y-2 bg-gradient-to-r from-blue-500 to-green-500 opacity-20 rounded-lg"></div>
    <h1 class="text-white text-3xl font-bold relative z-10">My Blog</h1>
    <ul class="flex space-x-4 mt-4">
        <li class="relative group">
            <a href="#" class="text-blue-300 hover:text-blue-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-blue-500">Home</a>
        </li>
        <li class="relative group">
            <a href="#" class="text-green-300 hover:text-green-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-green-500">About</a>
        </li>
        <li class="relative group">
            <a href="#" class="text-red-300 hover:text-red-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-red-500">Contact</a>
        </li>
        <li class="relative group">
            <a href="#" class="text-yellow-300 hover:text-yellow-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-yellow-500">Blog</a>
        </li>
    </ul>
    <div class="mt-5 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white">
            <span class="text-white">Welcome, User!</span>
        </div>
        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition ease-in-out duration-300">Search</button>
    </div>
</nav>

<!-- Dark Mode Styling -->
<nav class="dark:bg-gray-900 dark:text-gray-200 dark:shadow-2xl">
    <div class="dark:bg-gradient-to-r dark:from-blue-600 dark:to-green-600 dark:opacity-30 dark:rounded-lg"></div>
    <h1 class="dark:text-white">My Blog</h1>
    <ul class="space-x-4">
        <li>
            <a href="#" class="dark:text-blue-500 hover:dark:text-blue-400">Home</a>
        </li>
        <li>
            <a href="#" class="dark:text-green-500 hover:dark:text-green-400">About</a>
        </li>
        <li>
            <a href="#" class="dark:text-red-500 hover:dark:text-red-400">Contact</a>
        </li>
        <li>
            <a href="#" class="dark:text-yellow-500 hover:dark:text-yellow-400">Blog</a>
        </li>
    </ul>
    <div class="flex items-center justify-between">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="rounded-full">
            <span>Welcome, User!</span>
        </div>
        <button class="bg-blue-600 text-white">Search</button>
    </div>
</nav>

产品比较组件

产品比较具有极简/平面设计、大地色调配色方案和中等复杂性的组件，用于使用 Tailwind CSS 的仪表板用途。该组件响应迅速，并支持深色主题。无 JavaScript。

打开预览

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Comparison</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 dark:bg-gray-800 p-8">

<div class="container mx-auto bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Product Comparison</h2>

    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
            <thead>
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product A</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product B</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product C</th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-200 dark:divide-gray-600">
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Price</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$199.99</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$249.99</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$299.99</td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Screen Size</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">13 inch</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">15 inch</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">14 inch</td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Storage</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">256GB</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">512GB</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">256GB</td>
                </tr>
                 <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">RAM</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">8GB</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">16GB</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">8GB</td>
                </tr>
                 <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Battery Life</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">10 hours</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">12 hours</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">11 hours</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

</body>
</html>

手风琴组件

带有 Material Design 的手风琴组件，大地色调配色方案，电子商务的简单复杂性，响应式深色主题支持。

打开预览

                <div class="accordion-item bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
  <h2 class="accordion-header mb-0" id="headingOne">
    <button
      class="accordion-button
    relative
    flex
    items-center
    w-full
    py-4
    px-5
    text-base text-gray-800 dark:text-gray-200 text-left
    bg-white dark:bg-gray-800
    border-0
    rounded-none
    transition
    focus:outline-none"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#collapseOne"
      aria-expanded="true"
      aria-controls="collapseOne"
    >
      Product Information
    </button>
  </h2>
  <div
    id="collapseOne"
    class="accordion-collapse collapse show"
    aria-labelledby="headingOne"
    data-bs-parent="#accordionExample"
  >
    <div class="accordion-body py-4 px-5 text-gray-600 dark:text-gray-400">
      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
    </div>
  </div>
</div>

<div class="accordion-item bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
  <h2 class="accordion-header mb-0" id="headingTwo">
    <button
      class="accordion-button
    collapsed
    relative
    flex
    items-center
    w-full
    py-4
    px-5
    text-base text-gray-800 dark:text-gray-200 text-left
    bg-white dark:bg-gray-800
    border-0
    rounded-none
    transition
    focus:outline-none"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#collapseTwo"
      aria-expanded="false"
      aria-controls="collapseTwo"
    >
      Shipping Details
    </button>
  </h2>
  <div
    id="collapseTwo"
    class="accordion-collapse collapse"
    aria-labelledby="headingTwo"
    data-bs-parent="#accordionExample"
  >
    <div class="accordion-body py-4 px-5 text-gray-600 dark:text-gray-400">
      This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
    </div>
  </div>
</div>

<div class="accordion-item bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
  <h2 class="accordion-header mb-0" id="headingThree">
    <button
      class="accordion-button
    collapsed
    relative
    flex
    items-center
    w-full
    py-4
    px-5
    text-base text-gray-800 dark:text-gray-200 text-left
    bg-white dark:bg-gray-800
    border-0
    rounded-none
    transition
    focus:outline-none"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#collapseThree"
      aria-expanded="false"
      aria-controls="collapseThree"
    >
      Returns and Exchanges
    </button>
  </h2>
  <div
    id="collapseThree"
    class="accordion-collapse collapse"
    aria-labelledby="headingThree"
    data-bs-parent="#accordionExample"
  >
    <div class="accordion-body py-4 px-5 text-gray-600 dark:text-gray-400">
      This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
    </div>
  </div>
</div>

用户提及组件

User Mentions 具有 Glassmorphism 风格、柔和配色方案和复杂电子商务复杂程度的组件，具有响应式设计和深色主题支持，使用 Tailwind CSS。

打开预览

                <div class="container mx-auto p-6">
  <div class="glassmorphism-container rounded-lg shadow-xl p-6">
    <h2 class="text-2xl font-bold mb-6">User Mentions</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- User Mention Card 1 -->
      <div class="glassmorphism-card p-4 rounded-lg mb-4">
        <div class="flex items-center">
          <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-semibold">John Doe</h3>
            <p class="text-sm opacity-75">@johndoe</p>
          </div>
        </div>
        <p class="mt-4 text-sm">"This product is amazing! Highly recommend it."</p>
        <div class="flex justify-end mt-4">
          <button class="glassmorphism-button py-2 px-4 rounded-lg text-sm">View Profile</button>
        </div>
      </div>

      <!-- User Mention Card 2 -->
      <div class="glassmorphism-card p-4 rounded-lg mb-4">
        <div class="flex items-center">
          <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-semibold">Jane Smith</h3>
            <p class="text-sm opacity-75">@janesmith</p>
          </div>
        </div>
        <p class="mt-4 text-sm">"Fast shipping and great customer service."</p>
        <div class="flex justify-end mt-4">
          <button class="glassmorphism-button py-2 px-4 rounded-lg text-sm">View Profile</button>
        </div>
      </div>

      <!-- More User Mention Cards (add as needed) -->

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

<style>
/* Glassmorphism Styles */
.glassmorphism-container {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .glassmorphism-container {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.glassmorphism-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.dark .glassmorphism-card {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.glassmorphism-button {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: background-color 0.3s ease;
}

.dark .glassmorphism-button {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.7);
}

.glassmorphism-button:hover {
  background: rgba(255, 255, 255, 0.8);
}

.dark .glassmorphism-button:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Pastel Colors (adjust as needed with Tailwind classes) */
/* Example: Use classes like text-pink-300, bg-blue-100, etc. */

/* Dark Mode */
.dark body {
  background-color: #1a202c;
  color: #e2e8f0;
}

.dark .text-xl,
.dark .text-sm,
.dark .opacity-75 {
  color: #e2e8f0;
}
</style>

复杂的自然商业模态与微交互

一个复杂、响应迅速、具有微交互的地球色调模态组件，适用于商业网站，支持深色模式。

打开预览

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
  <div class="p-8 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800 transform transition-all duration-500 ease-in-out scale-95 hover:scale-100">
    <div class="text-center">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Modal Title</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">This is a complex modal with various interactive elements and a beautiful earth-toned color scheme, designed for business websites and supports dark mode.</p>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-green-700 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 transition transform duration-150 ease-in-out hover:scale-105">OK</button>
        <button id="cancel-btn" class="ml-3 px-4 py-2 bg-red-700 text-white text-base font-medium rounded-md shadow-sm hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 transition transform duration-150 ease-in-out hover:scale-105">Cancel</button>
      </div>
    </div>
  </div>
</div>

产品比较组件

一个根据 Material Design 原则设计的复杂商品对比组件，具有鲜艳的配色方案并支持深色模式。非常适合社交媒体网络界面。

打开预览

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-white dark:bg-gray-800">
  <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
    <img src="https://picsum.photos/400/200?random=1" alt="Product 1" class="w-full h-32 object-cover">
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 1</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 1 with vibrant highlights.</p>
      <div class="flex items-center">
        <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 shadow-md">
        <span class="ml-2 text-gray-700 dark:text-gray-300">@user1</span>
      </div>
      <button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
    </div>
  </div>

  <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
    <img src="https://picsum.photos/400/200?random=2" alt="Product 2" class="w-full h-32 object-cover">
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 2</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 2 with vibrant highlights.</p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
        <span class="ml-2 text-gray-700 dark:text-gray-300">@user2</span>
      </div>
      <button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
    </div>
  </div>

  <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
    <img src="https://picsum.photos/400/200?random=3" alt="Product 3" class="w-full h-32 object-cover">
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 3</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 3 with vibrant highlights.</p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
        <span class="ml-2 text-gray-700 dark:text-gray-300">@user3</span>
      </div>
      <button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
    </div>
  </div>
</div>

图表组件

一个响应式图表组件，采用拟物化风格设计，具有灰度配色方案和深色模式支持，非常适合电子商务应用程序。

打开预览

                <div class="max-w-2xl mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Sales Data</h2>
    <div class="flex justify-between">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item A</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Item A" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 150</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-3/4"></div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item B</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="Item B" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 120</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-2/4"></div>
            </div>
        </div>
    </div>
    <div class="flex justify-between mt-4">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item C</h3>
            <img src="https://picsum.photos/200/100?random=3" alt="Item C" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 100</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-1/4"></div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item D</h3>
            <img src="https://picsum.photos/200/100?random=4" alt="Item D" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 80</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-1/5"></div>
            </div>
        </div>
    </div>
</div>

地图组件

采用 Glassmorphism 风格设计的响应式地图组件，具有深色主题和 Tailwind CSS 类。适用于具有数据可视化和控制面板的仪表板。

打开预览

                <div class="bg-white bg-opacity-20 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-50 rounded-lg p-6 shadow-lg overflow-hidden">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Dashboard</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map View</h3>
            <img src="https://picsum.photos/600/300" alt="Map" class="rounded-lg w-full" />
        </div>
        <div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Statistics</h3>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-4" />
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-300">John Doe</p>
                    <p class="text-xl font-semibold text-gray-800 dark:text-gray-200">150 Visits</p>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map Controls</h3>
        <div class="flex justify-between mt-2">
            <button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Zoom In</button>
            <button class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800">Zoom Out</button>
        </div>
    </div>
</div>

残酷主义粘性导航

一个复杂的粘性导航组件，采用粗野主义设计，单色配色方案，专为投资组合设计，具有响应式设计和使用 Tailwind CSS 的深色模式支持。

打开预览

                <header class="text-gray-600 dark:text-gray-400 body-font sticky top-0 z-50 bg-white dark:bg-gray-900 border-b-4 border-black dark:border-white">
  <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
    <a class="flex title-font font-medium items-center text-gray-900 dark:text-white mb-4 md:mb-0">
      <span class="text-xl border-4 border-black dark:border-white p-2 font-bold">BRUTALIST NAV</span>
    </a>
    <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center font-bold">
      <a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">Home</a>
      <a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">About</a>
      <a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">Portfolio</a>
      <a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">Contact</a>
    </nav>
    <button class="inline-flex items-center bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white py-1 px-3 focus:outline-none hover:bg-gray-200 dark:hover:bg-gray-700 text-base mt-4 md:mt-0 font-bold">
      Hire Me
      <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
        <path d="M5 12h14M12 5l7 7-7 7"></path>
      </svg>
    </button>
  </div>
</header>

Back to Top 按钮

打开预览

                <template>
  <button
    :class="[
      'fixed bottom-6 right-6 p-4 rounded-full shadow-lg transition-all duration-300',
      'bg-gray-200 text-gray-700',
      'dark:bg-gray-700 dark:text-gray-200 dark:shadow-lg-dark',
      'hover:shadow-xl hover:-translate-y-1',
      'dark:hover:shadow-xl-dark dark:hover:-translate-y-1',
    ]"
    @click="scrollToTop"
    v-show="isVisible"
  >
    <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="M5 10l7-7m0 0l7 7m-7-7v18"
      />
    </svg>
  </button>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const isVisible = ref(false);

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

const handleScroll = () => {
  isVisible.value = window.scrollY > 100;
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
.shadow-lg {
  box-shadow: 7px 7px 14px #cbced1, -7px -7px 14px #ffffff;
}

.shadow-xl {
  box-shadow: 9px 9px 18px #cbced1, -9px -9px 18px #ffffff;
}

.dark .shadow-lg-dark {
  box-shadow: 7px 7px 14px #4a4a4a, -7px -7px 14px #626262;
}

.dark .shadow-xl-dark {
  box-shadow: 9px 9px 18px #4a4a4a, -9px -9px 18px #626262;
}
</style>

1 ... 103 104 105 106 107 ... 262