搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

地图组件

地图组件，具有拟物化设计、三色配色方案、中等复杂程度，适用于社交媒体目的。采用Tailwind CSS进行响应式设计，支持暗主题。

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl">
  <div class="relative rounded-lg overflow-hidden shadow-inner-lg">
    <img src="https://picsum.photos/800/400?random=1" alt="Map" class="w-full h-full object-cover filter grayscale contrast-125">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-green-500 to-red-500 opacity-50"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="bg-white dark:bg-gray-900 p-4 rounded-full shadow-lg transform scale-110">
        <svg class="h-8 w-8 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"/>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
        </svg>
      </div>
    </div>
  </div>
  <div class="mt-4 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow">
      <div>
        <p class="font-bold text-gray-800 dark:text-white">John Doe</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Exploring New York</p>
      </div>
    </div>
    <div class="flex space-x-2">
      <button class="flex items-center space-x-1 px-3 py-1 bg-blue-500 text-white text-sm rounded-full shadow-lg hover:bg-blue-600 transition duration-300">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21c-.64-.149-1.285-.451-1.8-.9a1.998 1.998 0 00-.682-.715l-3.5-3.5a2 2 0 00-2.828 0c-.5.5-.766 1.12-.766 1.727v0l-1.5.5a2 2 0 01-2 2.457v0A2 2 0 015 21H3v-3.5z"/>
        </svg>
        <span>Like</span>
      </button>
      <button class="flex items-center space-x-1 px-3 py-1 bg-green-500 text-white text-sm rounded-full shadow-lg hover:bg-green-600 transition duration-300">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.196-1.183c-.348-.252-.698-.48-.997-.716l-.006-.007C3.529 16.418 2 13.938 2 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
        </svg>
        <span>Comment</span>
      </button>
      <button class="flex items-center space-x-1 px-3 py-1 bg-red-500 text-white text-sm rounded-full shadow-lg hover:bg-red-600 transition duration-300">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.865 13.586 9 13.93 9 14.292V16H4.091C5.524 17.18 7.208 18 9 18h.083A6.001 6.001 0 0017 12c0-2.879-1.647-5.334-4-6.632V7c0 .456-.213.875-.568 1.1L9 10H6v2l4.515-.324c.142.3.335.591.576.865z"/>
        </svg>
        <span>Share</span>
      </button>
    </div>
  </div>
</div>

用户资料组件

玻璃摩尔主义用户个人资料组件，具有单色配色方案和简单复杂性。

打开预览

                
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
    <div class="px-6 py-8">
      <div class="flex justify-center">
        <img class="h-24 w-24 rounded-full border-4 border-gray-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar">
      </div>
      <div class="mt-4 text-center">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-300">Web Developer</p>
      </div>
      <div class="mt-6 flex justify-center space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.917 3.187 9.165 7.62 10.692.55.1 1.05-.25 1.05-.56V20.23c-3.03.65-3.676-1.44-3.676-1.44-.59-.15-1.21-.45-1.44-.66-.42-.36-.33-.04-.05-.03.33.03.53.27.53.27.2 1.52 1.25 1.05 1.55.8.04-.63.23-1.05.42-1.29-2-.23-4.1-.1-4.1-4.42 0-.98.35-1.86 1.02-2.5.1-.21-.45-1.25.1-2.62 0 0 .84-.27 2.75 1.02.8-.23 1.65-.34 2.5-.35.85.01 1.7.12 2.5.35 1.9-.29 2.75-1.02 2.75-1.02.56 1.37.1 2.41.1 2.62.67.64 1.02 1.52 1.02 2.5 0 4.33-2.07 4.71-4.11 4.42-.29.25-.58.48-.9.69-.23.16-.5.2-.82.1-.48-.15-1.05.5-1.05.5V22.11c0 .31.5.66 1.05.5C19.818 21.182 23 16.934 23 12.017 23 6.484 18.522 2 13 2h-1z" clip-rule="evenodd"></path>
          </svg>
        </a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path d="M8.29 20.251c7.5 0 11.675-6.253 11.675-11.675 0-.178 0-.35-.012-.523A8.134 8.134 0 0022 5.92a8.171 8.171 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.222 8.222 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

登录表单组件

一个极简登录表单组件，采用三色配色方案设计，适合展示作品集，并支持暗模式。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-sm">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-center">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-600 dark:text-gray-400 mb-2" for="email">Email</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-indigo-600" type="email" id="email" required placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-gray-600 dark:text-gray-400 mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-indigo-600" type="password" id="password" required placeholder="********">
            </div>
            <div class="flex items-center justify-between">
                <label class="inline-flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600 dark:bg-gray-600 rounded">
                    <span class="ml-2 text-gray-700 dark:text-gray-200">Remember Me</span>
                </label>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 text-sm">Forgot Password?</a>
            </div>
            <div class="mt-8">
                <button class="bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
            </div>
        </form>
        <div class="mt-6 text-center">
            <p class="text-gray-700 dark:text-gray-400 text-sm">Don't have an account? <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500">Sign Up</a></p>
        </div>
    </div>
</div>

错误消息组件

一个玻璃摩尔主义风格的错误信息组件，具有商务使用的深色主题。它使用Tailwind CSS进行样式设计，具有响应式设计和互动元素。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-sm bg-opacity-30 p-6 max-w-md w-full">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white">Error Message</h2>
        <p class="text-gray-600 dark:text-gray-300">An error has occurred while processing your request. Please try again later.</p>
        <div class="flex justify-center mt-4">
            <img src="https://picsum.photos/100/100" alt="Error Image" class="rounded-full border-4 border-gray-200 dark:border-gray-700" />
        </div>
        <div class="flex flex-col items-center mt-4">
            <button class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-semibold py-2 px-4 rounded mb-2">Retry</button>
            <button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded">Cancel</button>
        </div>
        <div class="mt-4">
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full" />
                <span class="text-gray-700 dark:text-gray-300">Support Team</span>
            </div>
        </div>
    </div>
</div>

360° 查看组件

一个简单的360°查看器组件，采用材料设计风格，具有土壤色调，适用于电子商务环境。它包括响应式设计，支持暗模式，展示来自picsum.photos的图片和来自randomuser.me的头像。

打开预览

                <div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">360° Product Viewer</h2>
        <div class="mt-4 flex justify-center items-center">
            <img src="https://picsum.photos/500/300?random=1" alt="360° View" class="rounded-lg shadow-md transition-transform duration-300 hover:scale-105">
        </div>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Explore our product from all angles. Rotate to view details and features.</p>
        </div>
        <div class="mt-6 flex justify-center">
            <button class="bg-green-600 dark:bg-green-800 text-white font-semibold py-2 px-4 rounded shadow-md hover:bg-green-500 dark:hover:bg-green-700 transition duration-200">Buy Now</button>
        </div>
        <div class="mt-6 text-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 shadow-lg">
            <p class="mt-2 text-gray-600 dark:text-gray-300">John Doe - E-commerce Specialist</p>
        </div>
    </div>
</div>

产品卡片组件

产品卡组件，具有粗野主义风格、单色配色方案，复杂程度适合电子商务目的。

打开预览

                <div class="dark:bg-stone-900 bg-stone-100 p-6">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Product Card 1 -->
    <div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
      <div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
        <div>
          <h3 class="text-2xl font-bold mb-2 uppercase">Product Title 1</h3>
          <p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center mb-4">
            <span class="text-xl font-bold mr-2">$49.99</span>
            <span class="text-sm line-through dark:text-stone-400 text-stone-500">$59.99</span>
          </div>
        </div>
        <div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
      <div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
        <div>
          <h3 class="text-2xl font-bold mb-2 uppercase">Product Title 2</h3>
          <p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center mb-4">
            <span class="text-xl font-bold mr-2">$75.00</span>
            <span class="text-sm line-through dark:text-stone-400 text-stone-500">$90.00</span>
          </div>
        </div>
        <div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
      <div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
        <div>
          <h3 class="text-2xl font-bold mb-2 uppercase">Product Title 3</h3>
          <p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center mb-4">
            <span class="text-xl font-bold mr-2">$120.00</span>
            <span class="text-sm line-through dark:text-stone-400 text-stone-500">$150.00</span>
          </div>
        </div>
        <div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
        </div>
      </div>
    </div>

  </div>
</div>

内容展示组件

一个响应式内容展示组件，具有极简和扁平的设计风格，适合博客和内容消费。它具有灰度配色方案，并配备互动元素，同时支持暗模式。

打开预览

                <div class="max-w-xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
        <div class="ml-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">January 1, 2023</p>
        </div>
    </div>
    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Understanding Minimalism in Design</h3>
    <img class="w-full h-48 object-cover rounded-md my-4" src="https://picsum.photos/640/360?random=1" alt="Content Image">
    <p class="text-gray-700 dark:text-gray-300 mb-4">Minimalism in design is all about simplicity and the use of space. By focusing on fewer elements, designers can create engaging experiences that are not only functional but also aesthetically pleasing. In this blog post, we will explore the principles of minimalism and how they can be applied.</p>
    <a href="#" class="inline-block bg-gray-800 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400">Read More</a>
</div>

信息图表组件

一个简单的信息图组件，采用新拟态风格和柔和的色彩方案设计。它在视觉上吸引人的布局中显示了个人资料卡和基本统计数据，适合商业或企业网站。

打开预览

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md flex flex-col items-center">
    <div class="bg-white dark:bg-gray-700 p-4 rounded-full shadow-lg mb-4">
        <img src="https://picsum.photos/80/80" alt="Infographic Image" class="rounded-full">
    </div>
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
    <p class="text-gray-600 dark:text-gray-400">CEO, Company XYZ</p>
    <div class="mt-4 flex justify-between w-full">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Projects</h3>
            <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">120</p>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Clients</h3>
            <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">80</p>
        </div>
    </div>
    <div class="mt-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg w-full text-center">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Satisfaction Rate</h3>
        <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">95%</p>
    </div>
</div>

媒体嵌入组件

一个响应式媒体嵌入组件，具有玻璃摩尔主义设计、土壤色调和暗模式支持，使用Tailwind CSS构建，适用于社交媒体用例。包括磨砂玻璃效果，并使用占位符图像/头像。

打开预览

                <div class="relative overflow-hidden rounded-lg shadow-lg group 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="relative w-full overflow-hidden bg-gray-200 rounded-t-lg aspect-w-16 aspect-h-9 group-hover:opacity-75"> <img src="https://picsum.photos/id/237/1000/600" alt="Placeholder image" class="object-cover object-center w-full h-full"> </div> <div class="flex items-center px-5 py-4"> <div class="flex-shrink-0"> <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"> </div> <div class="ml-3"> <p class="text-sm font-medium text-gray-900 dark:text-white"> <a href="#" class="hover:underline"> Username </a> </p> <p class="text-xs text-gray-700 dark:text-gray-300"> Posted on March 15, 2023 </p> </div> </div> <div class="p-5"> <h3 class="text-lg font-medium text-gray-900 dark:text-white"> <a href="#"> Title of the Embedded Media </a> </h3> <p class="mt-2 text-sm text-gray-700 dark:text-gray-300"> This is a description of the embedded media, providing some context or details about the content. </p> </div> <div class="flex items-center justify-between px-5 py-3 bg-gray-100 dark:bg-gray-700 dark:bg-opacity-20"> <div class="flex space-x-4"> <span class="text-sm text-gray-700 dark:text-gray-300">Likes: 1.2k</span> <span class="text-sm text-gray-700 dark:text-gray-300">Comments: 350</span> </div> <a href="#" class="text-sm font-medium text-yellow-700 hover:text-yellow-600 dark:text-yellow-500 dark:hover:text-yellow-400"> View More </a> </div> </div>

新拟态加载器

一个简单的新拟态加载器组件，具有单色调色方案，适用于投资组合，支持响应式设计和黑暗主题。

打开预览

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="flex space-x-2 animate-pulse">
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
  </div>
</div>

1 ... 232 233 234 235 236 ... 335