组件 网格布局 拟物风格生动网格布局

拟物风格生动网格布局

响应式网格布局组件,支持深色模式,拟物化设计,鲜艳的色彩,中等复杂度,适用于投资组合。

预览

HTML 代码

<!-- Grid Layout Container -->
<div class="container mx-auto p-4 dark:bg-gray-900">

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

    <!-- Grid Item 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 transform transition duration-500 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Project Title 1</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of project 1 showcasing skills and technologies used.</p>
      <div class="flex justify-between items-center">
        <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline font-semibold">View Project</a>
        <img class="w-8 h-8 rounded-full ring-2 ring-blue-400" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
      </div>
    </div>

    <!-- Grid Item 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 transform transition duration-500 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Project Title 2</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of project 2 showcasing skills and technologies used.</p>
      <div class="flex justify-between items-center">
        <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline font-semibold">View Project</a>
        <img class="w-8 h-8 rounded-full ring-2 ring-purple-400" src="https://randomuser.me/api/portraits/women/76.jpg" alt="Avatar">
      </div>
    </div>

    <!-- Grid Item 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 transform transition duration-500 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Project Title 3</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of project 3 showcasing skills and technologies used.</p>
      <div class="flex justify-between items-center">
        <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline font-semibold">View Project</a>
        <img class="w-8 h-8 rounded-full ring-2 ring-green-400" src="https://randomuser.me/api/portraits/men/77.jpg" alt="Avatar">
      </div>
    </div>
    
    <!-- Add more grid items as needed -->

  </div>

</div>

相关组件

拟态仪表板网格

一个采用拟物设计的网格布局仪表板组件,配有互补色彩方案。

打开

简单粗野主义网格布局

一个简单的响应式粗野主义网格布局组件,具有土色调和深色模式支持,适合商业网站。

打开

网格布局组件

一个遵循材料设计原则的响应式网格布局组件,具有阴影效果和黑暗模式支持,使用Tailwind CSS。

打开