HTML 代码
<div class="container mx-auto px-4 py-8 dark:bg-gray-800">
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl dark:bg-gray-700">
<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/200/300" alt="Random image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold dark:text-indigo-300">Case Study</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white">Innovating with Microinteractions</a>
<p class="mt-2 text-gray-500 dark:text-gray-300">Exploring the power of small, engaging animations to enhance user experience in portfolio websites. This triadic color scheme (using shades of indigo, red, and yellow in other potential elements) provides a vibrant yet balanced feel. Moderate complexity allows for subtle hover effects and transitions.</p>
<div class="mt-4">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 dark:bg-gray-600 dark:text-gray-200">#microinteractions</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 dark:bg-gray-600 dark:text-gray-200">#tailwindcss</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:bg-gray-600 dark:text-gray-200">#portfolio</span>
</div>
</div>
</div>
</div>
</div>