搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

导航栏组件

一个响应式导航栏，具有引人入胜的微交互，专为电子商务设计，使用深色主题和大地色调。

                <nav class="bg-brown-800 text-white dark:bg-brown-900 shadow-lg">
    <div class="container mx-auto flex justify-between items-center p-4">
        <a href="#" class="text-2xl font-bold hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Shop</a>
        <div class="hidden md:flex space-x-8">
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Home</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Products</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">About Us</a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">
                <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full">
            </a>
            <a href="#" class="text-sm hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Cart</a>
        </div>
        <button class="md:hidden text-brown-200 hover:text-brown-500 dark:hover:text-brown-300 transition-colors focus:outline-none">
            <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="M4 6h16M4 12h16m-7 6h7" />
            </svg>
        </button>
    </div>
</nav>

<!-- Responsive adjustments for mobile -->
<div class="md:hidden">
    <ul class="bg-brown-800 text-white dark:bg-brown-900 p-4 space-y-2">
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Home</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Products</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">About Us</a></li>
        <li><a href="#" class="block hover:text-brown-500 dark:hover:text-brown-300 transition-colors">Contact</a></li>
    </ul>
</div>

社交登录组件

一个响应式社交登录组件，专为使用单色配色方案的深色模式而设计。适合使用具有交互式功能的博客和内容。

打开预览

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-center">Log in with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Twitter</span>
        </a>
    </div>
    <p class="mt-4 text-center text-gray-400">Or, <a href="#" class="text-gray-300 hover:underline">create a new account</a></p>
</div>

极简电子商务登录表单

一个极简扁平的设计登录表单，色彩柔和，专为电子商务网站设计。它简单、响应迅速，并支持使用 Tailwind CSS 的深色模式。

打开预览

                <div
      class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900"
    >
      <div
        class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md"
      >
        <h2
          class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6"
        >
          Login
        </h2>
        <form>
          <div class="mb-4">
            <label
              for="email"
              class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
            >
              Email Address
            </label>
            <input
              type="email"
              id="email"
              name="email"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              placeholder="Enter your email"
            />
          </div>
          <div class="mb-6">
            <label
              for="password"
              class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
            >
              Password
            </label>
            <input
              type="password"
              id="password"
              name="password"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              placeholder="Enter your password"
            />
          </div>
          <button
            type="submit"
            class="w-full bg-pastel-blue text-black py-2 px-4 rounded-md hover:bg-pastel-darker-blue focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-200"
          >
            Login
          </button>
        </form>
        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-300">
            Don't have an account? <a href="#" class="text-pastel-blue hover:underline">Sign Up</a>
          </p>
        </div>
      </div>
    </div>

产品画廊组件

具有深色模式的响应式 Product Gallery 组件

打开预览

                <div class="bg-gray-900 py-10">
  <div class="container mx-auto px-4">
    <h2 class="text-pastel-light mb-8 text-3xl font-bold text-center">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product 1" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 1</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 1.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product 2" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 2</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 2.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product 3" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 3</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 3.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
    </div>
  </div>
</div>

极简验证码

一个响应式 CAPTCHA 组件，支持深色模式，采用极简主义设计，色彩柔和。包括一个简单的复选框和一个文本占位符。

打开预览

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">CAPTCHA Verification</h2>
        <div class="flex items-center">
            <input type="checkbox" id="robot-checkbox" class="form-checkbox h-5 w-5 text-blue-600">
            <label for="robot-checkbox" class="ml-2 text-gray-700 dark:text-gray-300">I am not a robot</label>
        </div>
         <div class="mt-4 p-3 bg-gray-200 dark:bg-gray-700 rounded">
            <p class="text-sm text-gray-600 dark:text-gray-400">CAPTCHA will appear here</p>
        </div>
    </div>
</div>

拟物化模态组件

一个复杂的响应式模态组件，采用拟物化设计风格，具有用于电子商务的互补色。

打开预览

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-opacity-50 bg-gray-900 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 w-11/12 md:w-1/3">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Item Details</h2>
    <div class="flex justify-center my-4">
      <img src="https://picsum.photos/200/300" alt="Product Image" class="rounded-lg shadow-md" />
    </div>
    <p class="text-gray-600 dark:text-gray-300">This is where you can detail the product features, specifications, and other necessary information to help customers make an informed decision.</p>
    <ul class="my-4 text-gray-700 dark:text-gray-200">
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 1</li>
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 2</li>
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 3</li>
    </ul>
    <div class="flex items-center justify-between my-4">
      <span class="text-lg font-bold text-gray-800 dark:text-gray-100">$19.99</span>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
    </div>
    <div class="flex justify-center my-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-white dark:border-gray-800" />
      <span class="text-gray-700 dark:text-gray-200 ml-2">John Doe</span>
    </div>
    <button class="mt-4 w-full bg-red-500 hover:bg-red-600 text-white font-bold py-2 rounded">Close</button>
  </div>
</div>

粗糙主义仪表板地图组件

一个野兽派风格的仪表板地图组件，具有鲜艳的色彩、高对比度、复杂的交互式元素、响应式设计和使用 Tailwind CSS 的深色主题支持。

打开预览

                <div class="bg-yellow-300 dark:bg-purple-900 text-gray-900 dark:text-gray-100 min-h-screen p-8 font-mono">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold mb-8 border-b-4 border-red-500 pb-2">Dashboard Overview</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Map Section -->
      <div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
        <h2 class="text-2xl font-bold mb-4 border-b-2 border-blue-500 pb-2">Geographical Data</h2>
        <div class="h-64 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">
          [Interactive Map Placeholder]
        </div>
        <div class="mt-4 grid grid-cols-2 gap-4">
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Metric A</h3>
            <p class="text-xl text-green-600 dark:text-green-400">1,245</p>
          </div>
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Metric B</h3>
            <p class="text-xl text-red-600 dark:text-red-400">489</p>
          </div>
        </div>
      </div>

      <!-- Data Visualization Section -->
      <div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
        <h2 class="text-2xl font-bold mb-4 border-b-2 border-purple-500 pb-2">Key Metrics</h2>
        <div class="space-y-4">
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Sales Performance</h3>
            <div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
          </div>
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">User Engagement</h3>
            <div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Table Section -->
    <div class="mt-8 bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
      <h2 class="text-2xl font-bold mb-4 border-b-2 border-orange-500 pb-2">Recent Activity</h2>
      <table class="min-w-full border-collapse border border-black dark:border-lime-400">
        <thead>
          <tr>
            <th class="border border-black dark:border-lime-400 p-2 text-left">User</th>
            <th class="border border-black dark:border-lime-400 p-2 text-left">Action</th>
            <th class="border border-black dark:border-lime-400 p-2 text-left">Timestamp</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="border border-black dark:border-lime-400 p-2 flex items-center">
              <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
              <span>John Doe</span>
            </td>
            <td class="border border-black dark:border-lime-400 p-2">Viewed Report</td>
            <td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:30</td>
          </tr>
          <tr>
            <td class="border border-black dark:border-lime-400 p-2 flex items-center">
               <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
              <span>Jane Smith</span>
            </td>
            <td class="border border-black dark:border-lime-400 p-2">Updated Dashboard</td>
            <td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:45</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

电子商务仪表板组件

电子商务仪表板组件，具有拟物化、鲜艳的色彩和 Tailwind CSS 的简单布局，具有响应式和深色主题支持。

打开预览

                <div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl max-w-sm mx-auto">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Dashboard Overview</h2>
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Total Sales</p>
        <p class="text-lg font-semibold text-green-600 dark:text-green-400">$5,200</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" 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="M9 5l7 7-7 7"></path></svg>
  </div>
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-8m8 0l-5 2v-2m5 0z"></path></svg>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">New orders</p>
        <p class="text-lg font-semibold text-orange-600 dark:text-orange-400">150</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" 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="M9 5l7 7-7 7"></path></svg>
  </div>
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h.01M17 9l2 2m0 0l2-2m-2 2v-2v2z"></path></svg>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Pending Issues</p>
        <p class="text-lg font-semibold text-red-600 dark:text-red-400">12</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" 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="M9 5l7 7-7 7"></path></svg>
  </div>
</div>

复古仪表板手风琴

Retro/Vintage Accordion Component for Dashboard，具有互补的配色方案和复杂的复杂性。包括使用 Tailwind CSS 的响应式设计和深色主题支持。无 JavaScript。图片来自 picsum.photos 和头像来自 randomuser.me。

打开预览

                <div class="max-w-md mx-auto rounded-none overflow-hidden shadow-lg bg-gray-100 dark:bg-gray-800 border-4 border-purple-500 dark:border-yellow-500">
  <div class="border-b border-purple-400 dark:border-yellow-400">
    <button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
      Dashboard Section 1
    </button>
    <div class="px-6 py-4 text-gray-700 dark:text-gray-300">
      <p>Content for dashboard section 1. This section provides an overview of key metrics with interactive charts and graphs.</p>
      <div class="mt-4 grid grid-cols-2 gap-4">
        <div>
          <img src="https://picsum.photos/150/100" alt="Random Image" class="rounded border-2 border-purple-500 dark:border-yellow-500">
        </div>
        <div>
          <h4 class="text-md font-semibold text-purple-600 dark:text-yellow-400">Metric A</h4>
          <p class="text-sm">Value: 1200</p>
          <h4 class="text-md font-semibold text-purple-600 dark:text-yellow-400 mt-2">Metric B</h4>
          <p class="text-sm">Value: 75%</p>
        </div>
      </div>
    </div>
  </div>
  <div class="border-b border-purple-400 dark:border-yellow-400">
    <button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
      Dashboard Section 2
    </button>
    <div class="px-6 py-4 text-gray-700 dark:text-gray-300">
      <p>Content for dashboard section 2. Detailed reports and customizable views.</p>
        <div class="mt-4 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-500 dark:border-yellow-500">
            <div>
                <p class="font-semibold text-purple-600 dark:text-yellow-400">User Name</p>
                <p class="text-sm">Last activity: 2 hours ago</p>
            </div>
        </div>
    </div>
  </div>
    <div>
    <button class="w-full px-6 py-4 text-left text-lg font-bold text-purple-700 dark:text-yellow-300 bg-purple-200 dark:bg-yellow-700 hover:bg-purple-300 dark:hover:bg-yellow-600 transition duration-300">
      Dashboard Section 3
    </button>
    <div class="px-6 py-4 text-gray-700 dark:text-gray-300">
      <p>Content for dashboard section 3. Settings and configuration options.</p>
        <ul class="list-disc list-inside mt-2">
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
        </ul>
    </div>
  </div>
</div>

画廊组件

一个响应式画廊组件，使用 Tailwind CSS，具有拟物化设计、柔和的配色方案和适度的复杂性，适用于社交媒体目的。包括深色模式支持，并将 picsum.photos 用于图像，将 randomuser.me 用于头像。

打开预览

                <div class="container mx-auto px-4 py-8 dark:bg-gray-800">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/1/400/300" alt="Gallery Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of user 1">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 1</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/2/400/300" alt="Gallery Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar of user 2">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 2</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
     <div class="bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-700">
      <img src="https://picsum.photos/seed/3/400/300" alt="Gallery Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-white">Image Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the image goes here.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar of user 3">
          <div class="text-sm">
            <p class="text-gray-900 leading-none dark:text-white">User Name 3</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on January 1, 2024</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 175 176 177 178 179 ... 335