所有组件

身份验证组件

一个采用新拟态设计的电子商务认证组件，具有明亮的色彩、支持暗主题和响应式设计。

                <div class="flex justify-center items-center min-h-screen bg-gray-800 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-8 w-80 neumorphic">
        <h2 class="text-2xl font-bold text-center text-vibrant">Login</h2>
        <form class="mt-4">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="[email protected]">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="••••••••">
            </div>
            <button type="submit" class="w-full bg-vibrant text-white p-2 rounded-lg hover:shadow-lg transition ease-in-out duration-150">Login</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-vibrant">Sign Up</a></p>
        </div>
        <hr class="my-4 border-gray-300 dark:border-gray-600">
        <div class="text-center">
            <p class="text-gray-600 dark:text-gray-400">or login with</p>
            <div class="flex justify-center mt-2">
                <img src="https://picsum.photos/30" alt="Google Logo" class="rounded-full mx-2">
                <img src="https://picsum.photos/30" alt="Facebook Logo" class="rounded-full mx-2">
                <img src="https://picsum.photos/30" alt="Twitter Logo" class="rounded-full mx-2">
            </div>
        </div>
    </div>
</div>
<style>
@import "https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css";

.neumorphic {
    background: #e0e0e0;
    border-radius: 20px;
    box-shadow: 8px 8px 15px rgba(226, 226, 226, 0.3), -8px -8px 15px rgba(255, 255, 255, 0.3);
}

.dark.neumorphic {
    background: #434343;
    box-shadow: 8px 8px 15px rgba(0,0,0,0.5), -8px -8px 15px rgba(255,255,255,0.1);
}

.text-vibrant {
    color: #ff4081; /* You can change this color based on your vibrant color scheme */
}
</style>

聊天窗口组件

一个简单的聊天窗口组件，设计采用3D元素、地球色调配色方案，并支持响应式暗主题。

打开预览

                <div class="max-w-md mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-green-600 dark:bg-green-700 p-4">
        <h2 class="text-white text-lg font-semibold">Chat Window</h2>
    </div>
    <div class="p-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">Hello! How can I help you today?</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">I'm looking for more information about your services.</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">Sure! Please check our portfolio.</p>
            </div>
        </div>
        <div class="flex items-center">
            <input type="text" placeholder="Type your message..." class="flex-1 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 shadow-sm" />
            <button class="ml-2 bg-green-600 dark:bg-green-700 text-white px-4 py-2 rounded-lg shadow-lg">Send</button>
        </div>
    </div>
</div>

导航组件

一个响应式导航组件，支持暗模式，使用Tailwind CSS。它包括一个徽标、导航链接和一个行动号召按钮。

打开预览

                <nav class="bg-gray-900 text-white">
  <div class="container mx-auto px-6 py-4">
    <div class="flex justify-between items-center">
      <div class="flex items-center">
        <svg class="w-8 h-8 fill-current text-white mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
        <span class="text-xl font-bold">MyCompany</span>
      </div>
      <div class="hidden md:flex space-x-4">
        <a href="#" class="hover:text-purple-400">Home</a>
        <a href="#" class="hover:text-purple-400">About</a>
        <a href="#" class="hover:text-purple-400">Services</a>
        <a href="#" class="hover:text-purple-400">Contact</a>
      </div>
      <div class="hidden md:block">
        <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full">Get Started</button>
      </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-7 6h7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>

容器组件

一个复古/复古风格的组合组件，适用于作品集，采用单色配色方案，并支持暗黑模式。

打开预览

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-4xl mx-auto mt-10">
    <h1 class="text-4xl font-bold text-gray-100 dark:text-gray-200 mb-4">My Portfolio</h1>
    <p class="text-gray-300 dark:text-gray-400 mb-6">Showcasing my work from the nostalgic eras of the 80s and 90s.</p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 1</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 1 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 2</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 2 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 3</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 3 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=4" alt="Project 4" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 4</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 4 with a brief overview of the key elements and technologies used.</p>
        </div>
    </div>

    <div class="mt-10 text-center">
        <h3 class="text-3xl font-bold text-gray-200 dark:text-gray-300 mb-4">About Me</h3>
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-32 h-32 mx-auto mb-4">
        <p class="text-gray-300 dark:text-gray-400 max-w-md mx-auto">I'm a passionate developer with a love for retro designs and a knack for turning ideas into reality. Let's connect!</p>
    </div>
</div>

徽章组件

一个响应式徽章组件，采用大地色调的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>

类别