玻璃拟态投资组合容器
一个响应式玻璃形态容器组件，专为使用Tailwind CSS的作品集网站量身定制，支持暗模式。它具有磨砂玻璃效果、三元色彩方案、多种互动元素，并使用picsum.photos作为图片和randomuser.me用于头像。
HTML 代码
<div class="container mx-auto p-8">
<div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-300 font-semibold">Project Title</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Project Name</a>
<p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mt-4">
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tag1</span>
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tag2</span>
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200">#tag3</span>
</div>
<div class="mt-6 flex items-center">
<img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">John Smith</p>
<p class="text-gray-600 dark:text-gray-400">Developer</p>
</div>
</div>
<div class="mt-6">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full mr-2">View Project</button>
<button class="bg-transparent hover:bg-gray-500 text-gray-700 dark:text-gray-300 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded-full">Learn More</button>
</div>
</div>
</div>
</div>
<div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden mt-8">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/another/400/300" alt="Project Image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-green-500 dark:text-green-300 font-semibold">Another Project</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Another Project Name</a>
<p class="mt-2 text-gray-600 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="mt-4">
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tagA</span>
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tagB</span>
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200">#tagC</span>
</div>
<div class="mt-6 flex items-center">
<img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">Jane Doe</p>
<p class="text-gray-600 dark:text-gray-400">Designer</p>
</div>
</div>
<div class="mt-6">
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full mr-2">View Project</button>
<button class="bg-transparent hover:bg-gray-500 text-gray-700 dark:text-gray-300 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded-full">Learn More</button>
</div>
</div>
</div>
</div>
</div>