搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

热力图组件

一个具有复古/经典美感的响应式热图组件，旨在用于博客/内容，具有互动元素和暗主题支持。

                <div class="bg-gray-900 text-white p-8 rounded-lg shadow-lg">
    <h2 class="text-3xl font-bold text-center mb-6">Heat Maps Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg p-4">
            <h3 class="text-xl font-semibold">Popular Topics</h3>
            <ul class="mt-2">
                <li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 1 - <span class="font-medium">75%</span></li>
                <li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 2 - <span class="font-medium">65%</span></li>
                <li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 3 - <span class="font-medium">55%</span></li>
                <li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 4 - <span class="font-medium">85%</span></li>
            </ul>
        </div>
        <div class="bg-gradient-to-r from-blue-400 to-green-400 rounded-lg p-4">
            <h3 class="text-xl font-semibold">Recent Reads</h3>
            <div class="flex flex-col space-y-4 mt-2">
                <div class="flex items-center border border-gray-700 rounded p-2 hover:bg-gray-800 transition">
                    <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mr-3">
                    <div>
                        <h4 class="text-lg font-medium">Article Title 1</h4>
                        <p class="text-sm text-gray-400">Author Name</p>
                    </div>
                </div>
                <div class="flex items-center border border-gray-700 rounded p-2 hover:bg-gray-800 transition">
                    <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mr-3">
                    <div>
                        <h4 class="text-lg font-medium">Article Title 2</h4>
                        <p class="text-sm text-gray-400">Author Name</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-2xl font-bold text-center">Interactive Heat Map</h3>
        <div class="relative mt-4">
            <img src="https://picsum.photos/800/400" alt="Heat Map" class="w-full h-auto rounded-lg">
            <div class="absolute top-0 left-0 right-0 bottom-0 flex justify-between items-center">
                <div class="p-2 bg-red-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
                    <p class="text-white font-semibold">High Interest</p>
                </div>
                <div class="p-2 bg-yellow-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
                    <p class="text-white font-semibold">Moderate Interest</p>
                </div>
                <div class="p-2 bg-green-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
                    <p class="text-white font-semibold">Low Interest</p>
                </div>
            </div>
        </div>
    </div>
</div>

时间轴组件

一个响应式时间轴组件，以极简/扁平设计风格用于电子商务，支持暗模式，采用类似色彩方案和多个互动元素。

打开预览

                <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md">
  <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Our Journey</h2>
  <div class="relative mb-12">
    <div class="absolute w-1 bg-gray-300 dark:bg-gray-600 h-full left-1/2 transform -translate-x-1/2"></div>

    <div class="flex items-start mb-8">
      <div class="bg-green-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
      </div>
      <div class="ml-4 w-full">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 1: Browse Products</h3>
        <p class="text-gray-700 dark:text-gray-400">Explore our wide range of products and find what you love.</p>
        <span class="text-sm text-gray-500 dark:text-gray-500">January 2023</span>
      </div>
    </div>

    <div class="flex items-start mb-8">
      <div class="bg-blue-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
      </div>
      <div class="ml-4 w-full">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 2: Add to Cart</h3>
        <p class="text-gray-700 dark:text-gray-400">Add your favorite items to your shopping cart.</p>
        <span class="text-sm text-gray-500 dark:text-gray-500">February 2023</span>
      </div>
    </div>

    <div class="flex items-start mb-8">
      <div class="bg-orange-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
      </div>
      <div class="ml-4 w-full">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 3: Checkout</h3>
        <p class="text-gray-700 dark:text-gray-400">Proceed to checkout and complete your purchase.</p>
        <span class="text-sm text-gray-500 dark:text-gray-500">March 2023</span>
      </div>
    </div>

    <div class="flex items-start mb-8">
      <div class="bg-red-500 rounded-full w-10 h-10 flex items-center justify-center shadow-lg">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full" />
      </div>
      <div class="ml-4 w-full">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-200">Step 4: Order Confirmation</h3>
        <p class="text-gray-700 dark:text-gray-400">Receive confirmation of your order via email.</p>
        <span class="text-sm text-gray-500 dark:text-gray-500">April 2023</span>
      </div>
    </div>
  </div>

  <a href="#" class="inline-block bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-800">Shop Now</a>
</div>

复古电子商务粘性导航

一个复古/经典的粘性导航组件，适用于电子商务网站，具有鲜艳的颜色、复杂的元素、响应式设计和使用Tailwind CSS的暗模式支持。

打开预览

                <nav class="bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 text-white sticky top-0 z-50 shadow-lg dark:from-gray-800 dark:via-gray-700 dark:to-gray-600">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Brand -->
    <div class="flex items-center">
      <span class="text-2xl font-bold font-serif italic">RetroFinds</span>
    </div>

    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">New Arrivals</a>
      <a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">Shop All</a>
      <a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">Sale</a>
      <a href="#" class="hover:text-yellow-300 transition duration-300 ease-in-out font-mono">Contact</a>
    </div>

    <!-- Search and Icons -->
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="bg-white text-gray-800 rounded-full py-1 px-4 focus:outline-none focus:ring-2 focus:ring-yellow-300 dark:bg-gray-700 dark:text-white">
        <svg class="h-5 w-5 text-gray-400 absolute right-3 top-1/2 transform -translate-y-1/2 dark:text-gray-300" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>
      <a href="#" class="relative">
        <svg class="h-6 w-6 hover:text-yellow-300 transition duration-300 ease-in-out" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </a>
      <a href="#">
        <svg class="h-6 w-6 hover:text-yellow-300 transition duration-300 ease-in-out" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
      </a>
    </div>

    <!-- Mobile Menu Button -->
    <div class="md:hidden flex items-center">
      <button class="mobile-menu-button">
        <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 Content (hidden by default) -->
  <div class="mobile-menu hidden md:hidden bg-purple-500 dark:bg-gray-700">
    <a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">New Arrivals</a>
    <a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">Shop All</a>
    <a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">Sale</a>
    <a href="#" class="block py-2 px-4 text-sm hover:bg-purple-600 dark:hover:bg-gray-600 font-mono">Contact</a>
  </div>
</nav>

表单组件

响应式表单组件，采用3D设计、类似色彩方案，简单布局，适用于支持暗主题的电子商务。

打开预览

                <div class="container mx-auto p-4">

  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-xl p-6 transform hover:scale-105 transition duration-300">

    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Shipping Information</h2>



    <form>

      <div class="mb-4">

        <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>

        <input type="text" id="fullName" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="John Doe">

      </div>



      <div class="mb-4">

        <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>

        <input type="text" id="address" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="123 Main St">

      </div>



      <div class="mb-4">

        <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label>

        <input type="text" id="city" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="Anytown">

      </div>



      <div class="mb-4">

        <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip Code</label>

        <input type="text" id="zip" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="12345">

      </div>



      <div class="flex items-center justify-between">

        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform translate-z-0 perspective-origin dark:bg-blue-700 dark:hover:bg-blue-900">

          Submit Order

        </button>

      </div>

    </form>

  </div>

</div>

超现实主义投资组合布局

一个简单、响应式的拟物设计布局，适用于作品集，支持暗模式。

打开预览

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8">
  <div class="container mx-auto">
    <!-- Header -->
    <header class="p-6 mb-8 bg-gray-300 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h1 class="text-3xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
    </header>

    <!-- Main Content -->
    <main class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Project Card -->
      <div class="bg-gray-300 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Project Title 1</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project 1.</p>
        <img src="https://picsum.photos/400/250" alt="Project Image" class="rounded-lg shadow-md mb-4">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
      </div>

      <!-- Project Card -->
      <div class="bg-gray-300 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Project Title 2</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project 2.</p>
         <img src="https://picsum.photos/400/250" alt="Project Image" class="rounded-lg shadow-md mb-4">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
      </div>
    </main>

    <!-- Footer -->
    <footer class="mt-8 p-6 bg-gray-300 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-center text-gray-700 dark:text-gray-300">
      <p>&copy; 2023 My Portfolio</p>
    </footer>
  </div>
</div>

<style>
/* Custom Neumorphism Shadows */
.shadow-neumorphic-light {
  box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}

.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
}
</style>

评分系统组件

一个玻璃形态风格的评分系统组件，适合展示作品或产品的作品集，具有响应式设计和暗主题支持。

打开预览

                <div class="max-w-sm mx-auto mt-10 p-6 bg-white rounded-lg shadow-lg backdrop-blur-lg bg-opacity-30 ring-1 ring-gray-300 dark:bg-gray-800 dark:bg-opacity-50 dark:ring-gray-700">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Rate Our Work</h2>
    <div class="flex items-center mt-4">
        <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="ml-3 text-gray-700 dark:text-gray-300">John Doe</span>
    </div>
    <div class="mt-4">
        <span class="text-gray-700 dark:text-gray-300">Your Rating:</span>
        <div class="flex mt-2">
            <label class="flex items-center cursor-pointer">
                <input type="radio" name="rating" value="1" class="hidden"/>
                <svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
                    <polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
                </svg>
            </label>
            <label class="flex items-center cursor-pointer ml-1">
                <input type="radio" name="rating" value="2" class="hidden"/>
                <svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
                    <polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
                </svg>
            </label>
            <label class="flex items-center cursor-pointer ml-1">
                <input type="radio" name="rating" value="3" class="hidden"/>
                <svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
                    <polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
                </svg>
            </label>
            <label class="flex items-center cursor-pointer ml-1">
                <input type="radio" name="rating" value="4" class="hidden"/>
                <svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
                    <polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
                </svg>
            </label>
            <label class="flex items-center cursor-pointer ml-1">
                <input type="radio" name="rating" value="5" class="hidden"/>
                <svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
                    <polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
                </svg>
            </label>
        </div>
    </div>
    <div class="flex justify-center mt-4">
        <button class="px-4 py-2 text-white font-semibold bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">Submit</button>
    </div>
    <div class="mt-5 flex justify-center dark:text-gray-400">
        <img class="w-16 h-16 rounded-full" src="https://picsum.photos/id/1015/200/200" alt="Portfolio Image">
    </div>
</div>

玻璃拟态投资组合容器

一个响应式玻璃形态容器组件，专为使用Tailwind CSS的作品集网站量身定制，支持暗模式。它具有磨砂玻璃效果、三元色彩方案、多种互动元素，并使用picsum.photos作为图片和randomuser.me用于头像。

打开预览

                <div class="container mx-auto p-8">
  <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-300 font-semibold">Project Title</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Project Name</a>
        <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div class="mt-4">
          <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tag1</span>
          <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tag2</span>
          <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200">#tag3</span>
        </div>
        <div class="mt-6 flex items-center">
          <img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">John Smith</p>
            <p class="text-gray-600 dark:text-gray-400">Developer</p>
          </div>
        </div>
        <div class="mt-6">
          <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full mr-2">View Project</button>
          <button class="bg-transparent hover:bg-gray-500 text-gray-700 dark:text-gray-300 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded-full">Learn More</button>
        </div>
      </div>
    </div>
  </div>

    <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden mt-8">
      <div class="md:flex">
        <div class="md:flex-shrink-0">
          <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/another/400/300" alt="Project Image">
        </div>
        <div class="p-8">
          <div class="uppercase tracking-wide text-sm text-green-500 dark:text-green-300 font-semibold">Another Project</div>
          <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Another Project Name</a>
          <p class="mt-2 text-gray-600 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="mt-4">
            <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tagA</span>
            <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tagB</span>
            <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200">#tagC</span>
          </div>
          <div class="mt-6 flex items-center">
            <img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">Jane Doe</p>
              <p class="text-gray-600 dark:text-gray-400">Designer</p>
            </div>
          </div>
          <div class="mt-6">
            <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full mr-2">View Project</button>
            <button class="bg-transparent hover:bg-gray-500 text-gray-700 dark:text-gray-300 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded-full">Learn More</button>
          </div>
        </div>
      </div>
    </div>
</div>

列组件

一个响应式列组件，采用玻璃形态设计，使用三元色彩方案，适用于商业/企业网站。它具有磨砂玻璃般的半透明元素、模糊效果，并适合暗模式。

打开预览

                <div class="flex flex-col lg:flex-row justify-between p-6 bg-white dark:bg-gray-800 bg-opacity-70 backdrop-blur-md rounded-lg shadow-lg space-y-6 lg:space-y-0 lg:space-x-6">
    <div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 1</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for the first column. It can contain any information relevant to your business.</p>
        <img src="https://picsum.photos/200/150?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
    </div>
    <div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Description for the second column goes here. You can elaborate on services or features.</p>
        <img src="https://picsum.photos/200/150?random=2" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
    </div>
    <div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 3</h2>
        <p class="text-gray-600 dark:text-gray-400">Details for the third column. Include any additional content as needed.</p>
        <img src="https://picsum.photos/200/150?random=3" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
    </div>
</div>

面包屑导航组件

响应式面包屑导航组件，采用Material Design和Tailwind CSS风格，支持暗主题和三元色彩方案。

打开预览

                <nav class="bg-white dark:bg-gray-800 shadow-md rounded p-4 mb-6">
    <ol class="list-reset flex text-gray-600 dark:text-gray-300 text-sm font-semibold">
        <li>
            <a href="#" class="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Home</a>
            <span class="mx-2">/</span>
        </li>
        <li>
            <a href="#" class="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Blog</a>
            <span class="mx-2">/</span>
        </li>
        <li class="text-gray-500 dark:text-gray-400">Post Title</li>
    </ol>
</nav>

<section class="bg-white dark:bg-gray-800 p-5 rounded shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">
        Post Title
    </h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
        <p class="text-gray-600 dark:text-gray-300 text-sm">
            Written by <span class="font-semibold">Author Name</span> on <span class="font-semibold">June 1, 2023</span>
        </p>
    </div>
    <img src="https://picsum.photos/800/400" alt="Blog Post Image" class="w-full rounded mb-4 shadow">
    <p class="text-gray-700 dark:text-gray-300 mb-4">
        Welcome to the blog post content. This is where you can include your text... 
    </p>
</section>

进度条组件

一个简单的进度条组件，采用玻璃摩尔主义和单色配色方案，适合商业和企业网站，支持暗模式。

打开预览

                <div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 bg-opacity-30 backdrop-blur-md border border-gray-500 rounded-lg p-6 shadow-lg w-1/2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Progress</h2>
        <div class="relative w-full h-4 rounded-full bg-gray-300 dark:bg-gray-600">
            <div class="absolute top-0 left-0 h-4 rounded-full bg-blue-500" style="width: 70%;"></div>
        </div>
        <span class="text-base text-gray-800 dark:text-gray-200 mt-2">70%</span>
    </div>
</div>

1 ... 231 232 233 234 235 ... 335