搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

简单的3D柔和色调搜索框

一个响应式搜索框组件，具有3D般的设计、柔和的配色方案和暗色主题支持，使用 Tailwind CSS 构建，适合博客/内容网站。

                <body>
  <div class="min-h-screen bg-gradient-to-br from-pastel-pink-200 to-pastel-blue-200 dark:from-pastel-purple-900 dark:to-pastel-teal-900 p-8">
    <div class="max-w-md mx-auto">

      <!-- Simple Search Box -->
      <div class="relative transform translate-z-0 group">
        <input type="text" placeholder="Search..." class="w-full px-6 py-3 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-pastel-green-400 dark:focus:ring-pastel-teal-600 transition-all transform origin-center group-hover:-translate-y-1 group-hover:shadow-lg">
        <div class="absolute inset-0 border-2 border-pastel-green-400 dark:border-pastel-teal-600 rounded-lg pointer-events-none transform translate-z-0 group-hover:-translate-y-1"></div>
        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-gray-400 dark:text-gray-500 pointer-events-none" 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>

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

媒体嵌入组件

一个简单的、响应式的媒体嵌入组件，采用灰度3D设计和暗模式支持，适合商业网站。使用 Tailwind CSS 进行样式设计。

打开预览

                <div class="relative flex items-center justify-center h-96 overflow-hidden bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg m-4">

  <!-- 3D effect background elements (simplified) -->
  <div class="absolute inset-0 z-0 pointer-events-none transform scale-150">
    <div class="absolute inset-0 bg-gradient-to-br from-gray-300 via-gray-100 to-gray-300 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700 opacity-50"></div>
    <div class="absolute inset-0 border-4 border-gray-200 dark:border-gray-800 rounded-lg transform rotate-3"></div>
  </div>

  <!-- Content area -->
  <div class="relative z-10 p-8 bg-white dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 rounded-lg shadow-xl max-w-md text-center">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Embed Media</h2>
    
    <!-- Placeholder for embedded media (e.g., iframe for YouTube,- Vimeo) -->
    <!-- Replace with actual embed code -->
    <div class="w-full aspect-video bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
      <p>Media Placeholder</p>
    </div>

    <p class="mt-4 text-gray-600 dark:text-gray-300 text-sm">Embed your videos, maps, or other media here.</p>

  </div>

</div>

玻璃态仪表板导航栏

玻璃质感单色复杂仪表板导航栏，使用 Tailwind CSS，响应式并支持暗色主题。

打开预览

                <nav class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white font-bold text-xl">Dashboard</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">Settings</a>
      <a href="#" class="text-white hover:text-gray-200">Reports</a>
      <a href="#" class="text-white hover:text-gray-200">Users</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

警报消息组件

一个简单的、响应式的、灰度警报消息组件，适用于电子商务网站，支持暗模式。

打开预览

                <div class="flex items-center p-4 text-sm text-gray-800 border border-gray-300 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 15.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
  </svg>
  <span class="sr-only">Info</span>
  <div>
    <span class="font-medium">New message:</span> Your order has been placed successfully.
  </div>
</div>

社交组件组件

一个复古/复古社交媒体组件，具有简单的布局和互补色彩方案。支持暗模式，并且响应式。

打开预览

                <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md max-w-sm mx-auto">
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div class="text-gray-900 dark:text-white font-bold text-xl">User Name</div>
  </div>
  <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
    This is a sample social media post with a retro feel. #retro #tailwind
  </p>
  <img class="w-full rounded-lg mb-4" src="https://picsum.photos/400/300" alt="Sample Image">
  <div class="flex justify-between items-center">
    <div class="flex text-gray-700 dark:text-gray-300">
      <span class="mr-2">❤️ 120</span>
      <span>💬 30</span>
    </div>
    <div class="text-blue-600 dark:text-blue-400 font-bold">View Comments</div>
  </div>
</div>

内容展示组件

一个玻璃质感样式的组件，用于展示投资组合内容，具有互动元素，支持暗模式。

打开预览

                <div class="flex flex-col items-center justify-center p-5 bg-gray-900 min-h-screen">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-lg bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Portfolio Showcase</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">Explore my recent work and projects in this beautifully designed portfolio section.</p>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=1" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                    </div>
                </div>
            </div>

            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=2" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                    </div>
                </div>
            </div>

            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=3" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
                    </div>
                </div>
            </div>

            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=4" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 4</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

媒体嵌入组件

一个极简的媒体嵌入组件，专为仪表板设计，采用响应式设计并支持暗色主题，使用 Tailwind CSS。

打开预览

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-xs mx-auto">
    <div class="relative overflow-hidden rounded-lg">
        <img src="https://picsum.photos/400/200" alt="Media" class="w-full h-48 object-cover rounded-lg">
    </div>
    <div class="mt-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-500 dark:border-gray-300">
            <div class="ml-4">
                <h2 class="text-lg font-semibold dark:text-white">Media Title</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the media content goes here.</p>
            </div>
        </div>
        <div class="mt-2">
            <button class="bg-gray-800 text-white py-1 px-3 rounded hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400">Action Button</button>
        </div>
    </div>
</div>

社交组件组件

一个简单的社交组件，采用拟物化风格设计，使用鲜艳的颜色，适用于专业商业网站，响应式设计并支持暗模式。

打开预览

                <div class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            <div>
                <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400">Business Analyst</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300">Follow us on our platforms!</p>
        <div class="flex mt-4 space-x-4">
            <a href="#" class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">
                <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="w-5 h-5">
            </a>
            <a href="#" class="flex items-center justify-center w-10 h-10 bg-blue-400 rounded-full hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-500">
                <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="w-5 h-5">
            </a>
            <a href="#" class="flex items-center justify-center w-10 h-10 bg-red-500 rounded-full hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600">
                <img src="https://picsum.photos/30/30?random=3" alt="Instagram" class="w-5 h-5">
            </a>
        </div>
    </div>
</div>

复古经典搜索框

一个响应式搜索框组件，采用复古/复古美学设计，使用适合社交媒体界面的类比配色方案，并支持暗色主题。

打开预览

                <div class="flex justify-center items-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-900 dark:to-pink-800 rounded-lg shadow-lg mt-10">
    <input type="text" placeholder="Search..." class="w-80 p-3 border-2 border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-300 dark:border-purple-700 dark:bg-gray-800 dark:text-white dark:focus:ring-pink-600">
    <button class="ml-2 p-3 bg-yellow-400 text-white rounded-lg font-semibold hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700">
        <img src="https://picsum.photos/20/20" alt="Search Icon" class="inline"> Search
    </button>
</div>

<div class="flex justify-center items-center mt-3">
    <img src="https://picsum.photos/200/100" alt="Search Illustration" class="rounded-md shadow-md">
</div>

<div class="mt-5 text-center">
    <div class="flex items-center justify-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
        <p class="ml-2 text-lg text-gray-800 dark:text-gray-200">User Name</p>
    </div>
    <p class="text-sm text-gray-600 dark:text-gray-400">Search for something amazing...</p>
</div>

会话超时警报组件

一个响应式会话超时警报组件，专为电子商务设计，具有吸引人的动画和黑暗主题。它包含警告消息、倒计时器，以及延长会话或注销的选项。

打开预览

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-80 dark:bg-opacity-90 transition-all duration-300 ease-in-out">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mx-4 w-full max-w-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 animate-bounce">Session Timeout Warning</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Your session is about to expire due to inactivity.</p>
        <div class="flex items-center mb-4">
            <span class="text-2xl font-bold text-gray-800 dark:text-gray-200 mr-2" id="countdown">02:30</span>
            <span class="text-gray-500 dark:text-gray-400">Remaining</span>
        </div>
        <div class="flex justify-between mt-4">
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition-all duration-200 ease-in-out dark:bg-blue-600 dark:hover:bg-blue-700">Extend Session</button>
            <button class="bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded transition-all duration-200 ease-in-out dark:bg-red-600 dark:hover:bg-red-700">Log Out</button>
        </div>
    </div>
</div>

1 ... 229 230 231 232 233 ... 335