搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

徽章组件

一个响应式徽章组件，采用大地色调的3D风格，具有适合仪表板的互动元素。

                <div class="flex flex-wrap gap-4 p-5">
    <!-- Badge 1 -->
    <div class="bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 1" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Active Users</h2>
        <p class="text-gray-600 dark:text-gray-400">1500</p>
    </div>
    
    <!-- Badge 2 -->
    <div class="bg-gradient-to-br from-brown-400 to-brown-500 dark:from-brown-600 dark:to-brown-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 2" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Signups</h2>
        <p class="text-gray-600 dark:text-gray-400">300</p>
    </div>
    
    <!-- Badge 3 -->
    <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 3" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Total Revenue</h2>
        <p class="text-gray-600 dark:text-gray-400">$10,000</p>
    </div>
    
    <!-- Badge 4 -->
    <div class="bg-gradient-to-br from-gray-400 to-gray-500 dark:from-gray-600 dark:to-gray-800 shadow-lg rounded-lg p-4 transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/100/80" alt="Badge Image 4" class="rounded-lg mb-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Feedback Received</h2>
        <p class="text-gray-600 dark:text-gray-400">250</p>
    </div>
</div>

添加到购物车按钮

一个响应式的添加到购物车按钮组件，采用拟物化元素，生动的色彩，并支持深色主题，适合博客和内容消费目的。

打开预览

                <div class="flex flex-col items-center justify-center p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition duration-300">
    <img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-32 rounded-lg shadow-md mb-4">
    <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">Special Product</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">This is a great product for your reading material. Click the button below to add it to your cart!</p>
    <button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold py-2 px-4 border rounded-lg hover:scale-105 transform transition duration-300 ease-in-out shadow-lg">
        <span class="flex items-center justify-center">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            Add to Cart
        </span>
    </button>
</div>

黑暗模式模态组件

一个简单的响应式模态组件，专为社交媒体界面设计，适用于暗黑模式，采用粉彩色方案。

打开预览

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-80 dark:bg-gray-800">
    <div class="bg-gray-800 rounded-lg shadow-lg w-11/12 md:w-1/3 p-6">
        <h2 class="text-xl font-bold text-white mb-4">Welcome to Our Community!</h2>
        <p class="text-gray-300 mb-4">Join us in sharing ideas, experiences, and connecting with one another. We believe in the power of community.</p>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <span class="text-pink-200 font-semibold">John Doe</span>
        </div>
        <img src="https://picsum.photos/300/150" alt="Placeholder" class="rounded-lg mb-4">
        <button class="w-full bg-pink-500 hover:bg-pink-400 text-white font-bold py-2 px-4 rounded">Join Now</button>
        <button class="w-full mt-2 bg-transparent border border-pink-500 hover:bg-pink-500 hover:text-white text-pink-500 font-bold py-2 px-4 rounded">Cancel</button>
    </div>
</div>

用户个人资料简单卡片

响应式用户资料卡，采用Tailwind CSS，材料设计，大地色调色彩方案。支持暗黑模式，不需要JavaScript。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="w-full max-w-sm p-6 bg-white rounded-lg shadow-md dark:bg-gray-700">
    <div class="flex flex-col items-center">
      <img class="w-24 h-24 rounded-full shadow-lg" src="https://randomuser.me/api/portraits/men/87.jpg" alt="User avatar">
      <h2 class="mt-4 text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-300">Exploring the world, one byte at a time.</p>
    </div>
    <div class="grid grid-cols-2 gap-4 mt-6">
      <div class="text-center">
        <p class="text-gray-700 dark:text-gray-200">Followers</p>
        <p class="text-lg font-semibold text-gray-900 dark:text-white">1.2k</p>
      </div>
      <div class="text-center">
        <p class="text-gray-700 dark:text-gray-200">Following</p>
        <p class="text-lg font-semibold text-gray-900 dark:text-white">350</p>
      </div>
    </div>
    <div class="flex justify-center mt-6">
      <button class="px-4 py-2 font-bold text-white bg-teal-600 rounded-lg shadow-md hover:bg-teal-700 dark:bg-teal-700 dark:hover:bg-teal-800">View Profile</button>
    </div>
  </div>
</div>

复古柔和社交侧边栏

一个简单且响应式的侧边导航组件，具有复古/复古80年代/90年代设计，粉彩色，并支持暗黑模式，专为社交媒体界面设计，使用Tailwind CSS。

打开预览

                <div class="flex h-screen bg-gradient-to-b from-pink-200 to-purple-200 dark:from-gray-800 dark:to-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 p-6 space-y-6 transition-transform transform -translate-x-full md:translate-x-0 md:relative fixed inset-y-0 left-0 z-50">
    <!-- Profile Section -->
    <div class="flex items-center space-x-4">
      <img class="h-12 w-12 rounded-full ring-2 ring-pink-400 dark:ring-purple-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
      <div>
        <h2 class="text-xl font-bold">Jane Doe</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400">@janedoe</p>
      </div>
    </div>

    <nav class="space-y-2">
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H9a1 1 0 01-1-1v-5m3-7v3"/></svg>
        <span class="font-medium">Home</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.932 8-11 8a9.913 9.913 0 01-3.365-.686A2 2 0 015 20.5V17m-7-3h2m-2 4h2m4-2h2m-2 4h2"/></svg>
        <span class="font-medium">Messages</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a6 6 0 00-6 0m6 0v1a3 3 0 01-3 3H9a3 3 0 01-3-3v-1"/></svg>
        <span class="font-medium">Notifications</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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"/></svg>
        <span class="font-medium">Profile</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/></svg>
        <span class="font-medium">Settings</span>
      </a>
    </nav>
  </div>

  <!-- Content Area -->
  <div class="flex-1 p-10">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6">Main Content</h1>
    <!-- Your content goes here -->
    <p class="text-gray-700 dark:text-gray-300">This is where the main content of your page will be displayed.</p>
  </div>
</div>

互动组件

具有极简/扁平设计的互动组件，采用大地色调的色彩方案，复杂程度适合仪表板目的，使用Tailwind CSS实现。响应式设计，支持深色主题。使用picsum.photos提供图片，随机用户.me提供头像。

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6">

  <!-- Header -->
  <header class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard</h1>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-white">
      </div>
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
    </div>
  </header>

  <!-- Main Content -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- Card 1: Sales Overview -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
      <!-- Placeholder for chart/graph -->
      <div class="bg-gray-200 dark:bg-gray-700 h-32 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
        Chart or Graph Placeholder
      </div>
    </div>

    <!-- Card 2: Recent Orders -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64 overflow-y-auto">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Orders</h2>
      <ul>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1001</span>
          <span class="text-green-600 dark:text-green-400">$150.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1002</span>
          <span class="text-green-600 dark:text-green-400">$220.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1003</span>
          <span class="text-green-600 dark:text-green-400">$95.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1004</span>
          <span class="text-green-600 dark:text-green-400">$310.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1005</span>
          <span class="text-green-600 dark:text-green-400">$180.00</span>
        </li>
      </ul>
    </div>

    <!-- Card 3: User Activity -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">User Activity</h2>
      <!-- Placeholder for activity feed -->
      <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="py-2 text-gray-700 dark:text-gray-300">User A logged in.</li>
        <li class="py-2 text-gray-700 dark:text-gray-300">User B updated profile.</li>
        <li class="py-2 text-gray-700 dark:text-gray-300">User C added a new product.</li>
      </ul>
    </div>

    <!-- Card 4: Statistics -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Statistics</h2>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Total Users</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">1,250</p>
        </div>
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Page Views</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">5,800</p>
        </div>
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Bounce Rate</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">35%</p>
        </div>
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Conversion Rate</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">4.2%</p>
        </div>
      </div>
    </div>

    <!-- Card 5: Quick Actions -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Quick Actions</h2>
      <div class="flex flex-col space-y-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Add New Product</button>
        <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">Generate Report</button>
        <button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">Send Notification</button>
      </div>
    </div>

    <!-- Card 6: Image Gallery (using picsum.photos) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64 overflow-y-auto">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Gallery</h2>
      <div class="grid grid-cols-2 gap-4">
        <img src="https://picsum.photos/id/1018/200/150" alt="Gallery Image 1" class="rounded-md">
        <img src="https://picsum.photos/id/1015/200/150" alt="Gallery Image 2" class="rounded-md">
        <img src="https://picsum.photos/id/1019/200/150" alt="Gallery Image 3" class="rounded-md">
        <img src="https://picsum.photos/id/103/200/150" alt="Gallery Image 4" class="rounded-md">
      </div>
    </div>

  </div>

</div>

地图组件

一个响应式地图组件，采用拟物化风格，具有柔和的粉彩色彩和丰富的界面，适合社交媒体网络。该组件支持明暗两种模式，并包含多个互动元素。

打开预览

                <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full max-w-xl p-6">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Explore the Map</h2>
  <div class="relative w-full h-64 rounded-lg overflow-hidden shadow-md transition-transform transform hover:scale-105">
    <img src="https://picsum.photos/400/300?random=1" alt="Map" class="w-full h-full object-cover">
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold px-2 py-1 rounded-full shadow-md">Current Location</span>
    </div>
  </div>
  <div class="mt-4 w-full">
    <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">Connect with Friends</h3>
    <div class="flex flex-wrap justify-between">
      <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-3 flex items-center mb-2 w-1/2 shadow-md">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
          <p class="text-gray-800 dark:text-gray-200 font-bold">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
      </div>
      <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-3 flex items-center mb-2 w-1/2 shadow-md">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
          <p class="text-gray-800 dark:text-gray-200 font-bold">Jane Smith</p>
          <p class="text-gray-600 dark:text-gray-400">@janesmith</p>
        </div>
      </div>
      <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-3 flex items-center mb-2 w-1/2 shadow-md">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
          <p class="text-gray-800 dark:text-gray-200 font-bold">Alice Johnson</p>
          <p class="text-gray-600 dark:text-gray-400">@alicejohnson</p>
        </div>
      </div>
    </div>
  </div>
</div>

新拟态验证码组件

一个响应式、复杂的验证码组件，采用拟物化风格，专为电子商务网站设计，支持深色主题，使用Tailwind CSS。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">We are not robots!</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-6">Please complete the CAPTCHA to continue.</p>
        <div class="flex flex-col mb-4">
            <img src="https://picsum.photos/200/100?random=1" alt="Random" class="rounded-lg shadow-inner mb-4">
            <span class="text-sm text-gray-500 dark:text-gray-400">Select all images with cars</span>
        </div>
        <div class="grid grid-cols-2 gap-2 mb-4">
            <img src="https://picsum.photos/200/200?random=2" class="rounded-lg shadow-inner cursor-pointer hover:shadow-lg" alt="Random Image 1">
            <img src="https://picsum.photos/200/200?random=3" class="rounded-lg shadow-inner cursor-pointer hover:shadow-lg" alt="Random Image 2">
            <img src="https://picsum.photos/200/200?random=4" class="rounded-lg shadow-inner cursor-pointer hover:shadow-lg" alt="Random Image 3">
            <img src="https://picsum.photos/200/200?random=5" class="rounded-lg shadow-inner cursor-pointer hover:shadow-lg" alt="Random Image 4">
        </div>
        <div class="flex flex-col mb-4">
            <label class="text-sm text-gray-600 dark:text-gray-300 mb-2">Enter the text you see:</label>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-3 shadow-inner">
                <input type="text" class="w-full bg-transparent outline-none text-gray-800 dark:text-gray-100" placeholder="Type here...">
            </div>
        </div>
        <div>
            <button class="w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-lg shadow">Verify</button>
        </div>
    </div>
</div>

会话超时警报

复古/复古会话超时警报组件，采用大地色调，响应式设计和深色主题支持。

打开预览

                <div class="fixed inset-0 bg-gray-800 bg-opacity-75 z-50">
  <div class="flex items-center justify-center min-h-screen">
    <div class="relative bg-stone-100 p-8 rounded-lg shadow-xl max-w-sm w-full mx-4 dark:bg-stone-800">
      <div class="text-center">
        <svg class="mx-auto mb-4 h-12 w-12 text-amber-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.856a1 1 0 00.77-1.612L11.73 2.61a1 1 0 00-1.464 0L3.308 19.388a1 1 0 00.77 1.612z"></path></svg>
        <h3 class="mb-5 text-lg font-bold text-stone-900 dark:text-stone-100">Session Timeout</h3>
        <p class="mb-5 text-sm text-stone-700 dark:text-stone-300">Your session is about to expire. Would you like to stay logged in?</p>
        <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-amber-600 text-base font-medium text-white hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 sm:col-start-2 sm:text-sm dark:bg-amber-700 dark:hover:bg-amber-800">
          Stay Logged In
        </button>
      </div>
    </div>
  </div>
</div>

聊天窗口组件

一个三维灰度聊天窗口组件，适用于仪表板，具有中等复杂性和交互特性。响应式设计，支持深色主题。

打开预览

                <!-- Chat Window Component (3D Grayscale, Moderate Complexity, Dashboard) -->

<div class="flex flex-col h-full bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-lg">
  <!-- Header -->
  <div class="flex items-center justify-between mb-4 pb-4 border-b border-gray-300 dark:border-gray-700">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat</h2>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <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="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>

  <!-- Messages Area -->
  <div class="flex-1 overflow-y-auto space-y-4 pr-2">
    <!-- Incoming Message (3D Effect) -->
    <div class="flex items-start space-x-3">
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <div class="relative max-w-xs px-4 py-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg shadow-md before:content-[''] before:absolute before:-left-1 before:top-3 before:w-2 before:h-2 before:bg-gray-300 dark:before:bg-gray-700 before:rotate-45">
        <p>Hello! This is an incoming message with a subtle 3D effect.</p>
      </div>
    </div>

    <!-- Outgoing Message (3D Effect) -->
    <div class="flex justify-end items-start space-x-3">
      <div class="relative max-w-xs px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-md after:content-[''] after:absolute after:-right-1 after:top-3 after:w-2 after:h-2 after:bg-blue-500 dark:after:bg-blue-700 after:rotate-45">
        <p>This is an outgoing message designed with a 3D feel.</p>
      </div>
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    </div>

    <!-- Another Incoming Message -->
    <div class="flex items-start space-x-3">
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <div class="relative max-w-xs px-4 py-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg shadow-md before:content-[''] before:absolute before:-left-1 before:top-3 before:w-2 before:h-2 before:bg-gray-300 dark:before:bg-gray-700 before:rotate-45">
        <p>Here's another example of an incoming message.</p>
      </div>
    </div>

     <!-- Another Outgoing Message -->
    <div class="flex justify-end items-start space-x-3">
      <div class="relative max-w-xs px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-md after:content-[''] after:absolute after:-right-1 after:top-3 after:w-2 after:h-2 after:bg-blue-500 dark:after:bg-blue-700 after:rotate-45">
        <p>And this is another outgoing message.</p>
      </div>
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    </div>
  </div>

  <!-- Input Area -->
  <div class="mt-4 pt-4 border-t border-gray-300 dark:border-gray-700 flex items-center">
    <input type="text" placeholder="Type your message..." class="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
    <button class="ml-4 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg shadow-md dark:bg-blue-700 dark:hover:bg-blue-800">
      Send
    </button>
  </div>
</div>

1 ... 263 264 265 266 267 ... 335