Skeuomorphism メディア コンポーネント

<div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800 shadow-lg rounded-xl">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- Featured Article Card -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 group">
      <img class="w-full h-64 object-cover" src="https://picsum.photos/800/600?random=1" alt="Featured Article Image">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Featured Article Title</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Published on <span class="font-semibold">October 26, 2023</span></p>
        <p class="text-gray-700 dark:text-gray-300 mt-4">This is a summary of the featured article. It gives a brief overview of the content to entice readers to click and learn more. The design mimics a physical object with subtle borders and shadow.</p>
        <div class="flex items-center mt-6">
          <img class="w-10 h-10 rounded-full mr-4 border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-300">John Doe</span>
        </div>
        <a href="#" class="inline-block mt-6 text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>

    <!-- Recent Articles List -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6">
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Recent Articles</h3>
      <ul>
        <li class="border-b border-gray-200 dark:border-gray-600 py-3 last:border-b-0">
          <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
            <h4 class="font-semibold">Recent Article Title 1</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">A short description of the recent article.</p>
          </a>
        </li>
        <li class="border-b border-gray-200 dark:border-gray-600 py-3 last:border-b-0">
          <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
            <h4 class="font-semibold">Recent Article Title 2</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">Another short description of a recent article.</p>
          </a>
        </li>
        <li class="py-3">
          <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
            <h4 class="font-semibold">Recent Article Title 3</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">A final short description for the list.</p>
          </a>
        </li>
      </ul>
       <button class="mt-6 w-full px-4 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">View All Articles</button>
    </div>

  </div>
</div>