Container Component

<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>