Componente de Componentes Sociales

<div class="bg-stone-100 dark:bg-stone-900 p-4 sm:p-6 lg:p-8 font-sans antialiased text-stone-800 dark:text-stone-200">
  <div class="max-w-xs mx-auto border-2 border-stone-400 dark:border-stone-700 rounded-lg overflow-hidden shadow-lg bg-stone-50 dark:bg-stone-800 transition-colors duration-300">
    <div class="relative">
      <img class="w-full h-32 object-cover object-center" src="https://picsum.photos/400/250?random=1" alt="News Article Cover">
      <span class="absolute top-2 left-2 bg-amber-700 text-amber-50 text-xs px-2 py-1 rounded font-mono uppercase tracking-wide">News</span>
    </div>
    <div class="p-4">
      <h3 class="text-lg font-bold text-amber-800 dark:text-amber-500 mb-2 leading-tight">Headline Connects Community Leaders</h3>
      <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 line-clamp-3">
        Local officials and community organizers gathered today to discuss new initiatives aimed at fostering stronger neighborhood bonds and addressing pressing local issues.
      </p>
      <div class="flex items-center justify-between text-stone-500 dark:text-stone-400 text-xs">
        <div class="flex items-center space-x-2">
          <img class="w-6 h-6 rounded-full border border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar">
          <span class="font-medium">John Doe</span>
        </div>
        <span>Oct 26, 2023</span>
      </div>
    </div>
  </div>
</div>