Content Display Components Component

<div class="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black p-4 flex items-center justify-center">
  <div class="max-w-md w-full bg-white dark:bg-gray-700 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-red-500/50">
    <div class="relative">
      <img class="w-full h-48 object-cover transition-opacity duration-300 hover:opacity-80" src="https://picsum.photos/600/400?random=1" alt="Article Thumbnail">
      <div class="absolute bottom-0 left-0 bg-black bg-opacity-50 dark:bg-opacity-70 text-white px-3 py-1 rounded-tr-lg text-sm font-semibold">
        Article
      </div>
    </div>
    <div class="p-5">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 transition-colors duration-300 hover:text-purple-700 dark:hover:text-red-400">
        The Future of Web Development
      </h3>
      <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
        Explore the exciting new trends and technologies shaping the web, from AI-powered tools to immersive user experiences.
      </p>
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-purple-500 dark:border-red-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold text-sm">John Doe</p>
            <p class="text-gray-500 dark:text-gray-400 text-xs">2 hours ago</p>
          </div>
        </div>
        <a href="#" class="text-purple-600 dark:text-red-400 hover:text-purple-800 dark:hover:text-red-600 transition-colors duration-300 font-medium text-sm flex items-center group">
          Read More
          <svg class="ml-1 w-4 h-4 transform transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
        </a>
      </div>
    </div>
  </div>
</div>