HTML 代码
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-lg mx-auto">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50" alt="Avatar" class="rounded-full w-12 h-12 border-4 border-white dark:border-gray-900 shadow-md">
<h2 class="ml-4 text-xl font-semibold text-gray-800 dark:text-gray-200">User Name</h2>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-inner">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">About</h3>
<p class="text-gray-600 dark:text-gray-400">
A brief description of the user or content, styled in a way that mimics a card.
</p>
</div>
<div class="mt-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Photos</h3>
<div class="grid grid-cols-2 gap-2 mt-2">
<img src="https://picsum.photos/200?random=1" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200?random=2" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200?random=3" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200?random=4" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
</div>
</div>
</div>