搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

活动提要组件

一个具有新拟态设计的大地色调活动反馈组件，复杂布局，响应式设计，并支持黑暗主题。

                <div class="container mx-auto p-6 bg-gray-200 dark:bg-gray-800 min-h-screen">

  <!-- Light Mode Neumorphism styles -->
  <style>
    .neumorphic-light {
      border-radius: 1rem;
      background: #e0e0e0;
      box-shadow: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff;
    }

    .neumorphic-light-inset {
      border-radius: 1rem;
      background: #e0e0e0;
      box-shadow: inset 8px 8px 15px #bebebe, inset -8px -8px 15px #ffffff;
    }
  </style>

  <!-- Dark Mode Neumorphism styles -->
  <style>
    @media (prefers-color-scheme: dark) {
      .dark .neumorphic-dark {
        border-radius: 1rem;
        background: #2d3748;
        box-shadow: 8px 8px 15px #1a202c, -8px -8px 15px #454f6a;
      }

      .dark .neumorphic-dark-inset {
        border-radius: 1rem;
        background: #2d3748;
        box-shadow: inset 8px 8px 15px #1a202c, inset -8px -8px 15px #454f6a;
      }
    }
  </style>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

    <!-- Left Sidebar (User Profile / Filters) -->
    <div class="md:col-span-1 p-6 neumorphic-light dark:neumorphic-dark">
      <div class="flex flex-col items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-24 h-24 mb-4 neumorphic-light-inset dark:neumorphic-dark-inset">
        <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">Blogger & Content Creator</p>
      </div>

      <div class="mt-8">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">All Activity</a></li>
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Comments</a></li>
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Likes</a></li>
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">New Posts</a></li>
        </ul>
      </div>
    </div>

    <!-- Main Activity Feed -->
    <div class="md:col-span-2 space-y-6">

      <!-- Activity Card Example 1 -->
      <div class="p-6 neumorphic-light dark:neumorphic-dark">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith <span class="font-normal text-gray-600 dark:text-gray-400">commented on</span> "Exploring the Wilds"</p>
            <span class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</span>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">"Great post! I really enjoyed reading about your adventure."</p>
        <div class="flex justify-end space-x-4">
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Reply</button>
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Like</button>
        </div>
      </div>

      <!-- Activity Card Example 2 -->
      <div class="p-6 neumorphic-light dark:neumorphic-dark">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Peter Jones <span class="font-normal text-gray-600 dark:text-gray-400">liked</span> "The Art of Minimalism"</p>
            <span class="text-sm text-gray-600 dark:text-gray-400">5 hours ago</span>
          </div>
        </div>
        <div class="flex justify-end space-x-4">
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Undo Like</button>
        </div>
      </div>

      <!-- Activity Card Example 3 (New Post) -->
      <div class="p-6 neumorphic-light dark:neumorphic-dark">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Emily Davis <span class="font-normal text-gray-600 dark:text-gray-400">published a new post</span> "My Journey in Photography"</p>
            <span class="text-sm text-gray-600 dark:text-gray-400">1 day ago</span>
          </div>
        </div>
        <div class="neumorphic-light dark:neumorphic-dark p-4 rounded-md mb-4">
            <img src="https://picsum.photos/seed/photography/400/200" alt="Post Image" class="rounded-md mb-4 neumorphic-light-inset dark:neumorphic-dark-inset">
            <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">My Journey in Photography</h4>
            <p class="text-gray-700 dark:text-gray-300 line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>

        <div class="flex justify-end space-x-4">
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Read Post</button>
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Comment</button>
        </div>
      </div>

    </div>

  </div>
</div>

评论部分组件

一个简单的评论部分组件，采用材料设计风格，使用单色方案，优化用于社交媒体界面，并支持黑暗主题的响应式设计。

打开预览

                <div class="max-w-2xl mx-auto p-4 dark:bg-gray-800 bg-white rounded-lg shadow-md">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
    <div class="mt-4 space-y-4">
        <!-- Comment 1 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">This is a comment. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">2 hours ago</span>
            </div>
        </div>
        <!-- Comment 2 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Another comment! Vivamus sit amet nulla nec urna maximus suscipit.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">3 hours ago</span>
            </div>
        </div>
        <!-- Comment 3 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Alice Brown</p>
                <p class="text-gray-600 dark:text-gray-400">This is another comment. Donec eget tristique eros, ac auctor orci.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">5 hours ago</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <textarea placeholder="Add a comment..." class="w-full dark:bg-gray-700 bg-gray-100 border border-gray-300 dark:border-gray-600 rounded-md p-2" rows="3"></textarea>
        <button class="mt-2 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-md">Post Comment</button>
    </div>
</div>

跳到内容链接组件

一个设计有拟物化元素类似于物理按钮的跳转到内容链接组件。该组件将采用柔和的色彩方案，适中的复杂性，包括悬停效果，并支持黑暗主题。

打开预览

                <div class="flex justify-center">
    <a href="#content" class="relative flex items-center justify-center w-52 h-12 rounded-lg shadow-lg bg-pastel-bg-light dark:bg-pastel-bg-dark text-pastel-text-light dark:text-pastel-text-dark hover:bg-gradient-to-r hover:from-pastel-hover-start hover:to-pastel-hover-end transition duration-200 ease-in-out">
        <span class="absolute inset-0 rounded-lg border border-pastel-border-light dark:border-pastel-border-dark transform scale-110 hover:scale-100 transition duration-200 ease-in-out"></span>
        <span class="font-semibold z-10">Skip to Content</span>
    </a>
</div>

<style>
    .bg-pastel-bg-light {
        background-color: #f9e3e3;
    }
    .bg-pastel-bg-dark {
        background-color: #3c3c3c;
    }
    .text-pastel-text-light {
        color: #2d2d2d;
    }
    .text-pastel-text-dark {
        color: #f6f6f6;
    }
    .hover\:bg-gradient-to-r:hover {
        background: linear-gradient(90deg, #f9b0b0, #f6dbbd);
    }
    .hover\:from-pastel-hover-start:hover {
        background-color: #f9b0b0;
    }
    .hover\:to-pastel-hover-end:hover {
        background-color: #f6dbbd;
    }
    .border-pastel-border-light {
        border-color: #f17979;
    }
    .border-pastel-border-dark {
        border-color: #606060;
    }
</style>

<div id="content" class="p-5 mt-10">
    <h1 class="text-2xl font-bold dark:text-white">Welcome to My Portfolio</h1>
    <img src="https://picsum.photos/800/400" alt="Portfolio Image" class="mt-5 rounded-lg shadow-lg">
    <p class="mt-3 dark:text-gray-300">Here you'll find a selection of my work and projects showcasing my skills and expertise.</p>
</div>

产品画廊组件

一个支持黑暗主题的响应式产品画廊组件，采用材料设计风格，大地色调，简单复杂度，适用于电子商务。

打开预览

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$29.99</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$39.50</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$19.00</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

跳过内容链接组件

一个为仪表板设计的响应式跳转内容链接组件，采用新拟态风格和大地色调。

打开预览

                <div class="flex justify-center mt-4">
    <a href="#content" class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white px-4 py-2 rounded-lg shadow-lg transition ease-in-out duration-300 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-300 dark:focus:ring-offset-gray-900">
        Skip to Content
    </a>
</div>

电子商务仪表板

一个用于数据可视化和控制面板的简单布局的黑暗模式电子商务仪表板组件。

打开预览

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <title>E-commerce Dashboard</title>
</head>
<body class="bg-gray-900 text-white">
    <div class="container mx-auto p-6">
        <h1 class="text-xl font-bold mb-6">E-commerce Dashboard</h1>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                <h2 class="font-semibold text-lg">Sales Overview</h2>
                <img src="https://picsum.photos/400/200?random=1" alt="Sales Overview" class="w-full h-32 object-cover rounded-md">
                <p class="mt-2">Total Sales: $10,000</p>
                <p class="mt-1">Orders: 150</p>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                <h2 class="font-semibold text-lg">User Insights</h2>
                <img src="https://picsum.photos/400/200?random=2" alt="User Insights" class="w-full h-32 object-cover rounded-md">
                <p class="mt-2">Total Users: 500</p>
                <p class="mt-1">Active Users: 300</p>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                <h2 class="font-semibold text-lg">Recent Orders</h2>
                <ul class="list-disc list-inside mt-2">
                    <li>Order #1 - $50</li>
                    <li>Order #2 - $30</li>
                    <li>Order #3 - $20</li>
                </ul>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                <h2 class="font-semibold text-lg">Profile Overview</h2>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
                    <div class="ml-3">
                        <p class="font-semibold">John Doe</p>
                        <p>[email protected]</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

容器组件

一个为电子商务设计的布鲁塔主义风格容器组件，具有响应式布局和黑暗主题支持，使用Tailwind CSS。

打开预览

                <div class="flex flex-col bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
    <header class="text-white text-2xl font-bold mb-4">E-commerce Store</header>
    <div class="flex flex-wrap gap-4">
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/300" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 1</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/301" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 2</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/302" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 3</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
    </div>
    <footer class="text-center mt-4 text-gray-400">
        <p>© 2023 E-commerce Store</p>
    </footer>
</div>

成功消息组件

一个为黑暗模式设计的响应式成功消息组件，采用生动的色彩方案，非常适合展示作品集中的工作。

打开预览

                <div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">  
    <h2 class="text-xl text-vibrant-500 font-bold mb-4">Success Messages</h2>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">John Doe</span>  
            <span class="text-gray-400 text-sm ml-2">2 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your project has been successfully submitted!</p>  
    </div>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">Jane Smith</span>  
            <span class="text-gray-400 text-sm ml-2">5 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your profile has been updated successfully!</p>  
    </div>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">Mike Johnson</span>  
            <span class="text-gray-400 text-sm ml-2">10 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your order has been placed successfully!</p>  
    </div>  
    <div class="flex justify-center mt-4">  
        <img src="https://picsum.photos/300/200?random=1" alt="Success Image" class="rounded-lg shadow-lg">  
    </div>  
</div>

社交分享按钮组件

一个为电子商务网站设计的拟物化社交分享按钮组件，具有灰度色彩方案和黑暗模式支持。

打开预览

                <div class="flex justify-center p-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="flex space-x-4">
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=1" alt="Share on Facebook" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Facebook</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=2" alt="Share on Twitter" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Twitter</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=3" alt="Share on Instagram" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Instagram</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=4" alt="Share via Email" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share via Email</span>
        </a>
    </div>
</div>

返回顶部按钮组件

一个简单的返回顶部按钮，采用粗野风格设计，使用 Tailwind CSS，适合投资组合网站。它具有灰度配色方案和暗模式支持。

打开预览

                <div class="fixed bottom-5 right-5 z-50">
    <a href="#top" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800 text-white hover:bg-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 transition-all duration-300 shadow-lg">
        ⬆️
    </a>
</div>

<div class="h-screen bg-gray-100 dark:bg-gray-800" id="top">
    <div class="container mx-auto p-5">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Portfolio</h1>
        <p class="text-gray-700 dark:text-gray-300">Showcasing my work and products.</p>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-5">
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/200" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/201" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/202" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
        </div>
    </div>
</div>

1 ... 228 229 230 231 232 ... 335