Componente del Foro de la Comunidad
Un componente del foro de la comunidad al estilo Neumorphism con avatares, hilos y un tema oscuro.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 py-8 px-4 rounded-lg shadow-lg max-w-4xl mx-auto">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Community Forum</h1>
<div class="flex flex-col space-y-4">
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<h2 class="font-semibold text-gray-900 dark:text-white">John Doe</h2>
<span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">2 hours ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300">What do you think about the latest updates in our community?</p>
<div class="flex justify-between items-center mt-4">
<button class="text-blue-500 hover:underline">Reply</button>
<span class="text-gray-500 dark:text-gray-400 text-sm">10 replies</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<h2 class="font-semibold text-gray-900 dark:text-white">Jane Smith</h2>
<span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">1 hour ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300">I love the new features! They really enhance the user experience.</p>
<div class="flex justify-between items-center mt-4">
<button class="text-blue-500 hover:underline">Reply</button>
<span class="text-gray-500 dark:text-gray-400 text-sm">5 replies</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<h2 class="font-semibold text-gray-900 dark:text-white">Michael Lee</h2>
<span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">30 minutes ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300">Can someone explain the upcoming changes in moderation?</p>
<div class="flex justify-between items-center mt-4">
<button class="text-blue-500 hover:underline">Reply</button>
<span class="text-gray-500 dark:text-gray-400 text-sm">2 replies</span>
</div>
</div>
</div>
</div>Componentes relacionados
Componente del Foro de la Comunidad
Un componente del foro comunitario diseñado en estilo brutalismo con una combinación de colores vibrantes, adecuado para experiencias de comercio electrónico. Incluye una variedad de elementos interactivos como publicaciones, comentarios y perfiles de usuario, todos diseñados con Tailwind CSS para un diseño receptivo con soporte para temas oscuros.
Componente del foro de la comunidad - Glassmorphism E-commerce
Un componente de foro de la comunidad de estilo glassmorphism para comercio electrónico, con elementos translúcidos, efectos de desenfoque y un esquema de color triádico. Responsivo con soporte para modo oscuro.
Componente del Foro de la Comunidad
Un componente simple del foro de la comunidad que utiliza los principios de Material Design, adaptado para el consumo de contenido del blog con una combinación de colores de tonos tierra y un diseño receptivo para la compatibilidad con el modo oscuro.