Componente del Foro de la Comunidad
Un componente minimalista del foro de la comunidad para el comercio electrónico, con un diseño limpio, una combinación de colores triádica y compatibilidad con el modo oscuro.
Código HTML
<div class="max-w-5xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<!-- Forum Header -->
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
<p class="text-gray-600 dark:text-gray-300 mb-6">Join the conversation about your favorite products!</p>
<!-- Post List -->
<div class="space-y-4">
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
<p class="text-gray-600 dark:text-gray-300">What is the best camera for beginners?</p>
<div class="text-sm text-gray-500 dark:text-gray-400">12 Replies | 2 Days Ago</div>
</div>
</div>
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-300">Can anyone recommend a good laptop?</p>
<div class="text-sm text-gray-500 dark:text-gray-400">8 Replies | 3 Days Ago</div>
</div>
</div>
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Michael Johnson</h3>
<p class="text-gray-600 dark:text-gray-300">Best headphones under $100?</p>
<div class="text-sm text-gray-500 dark:text-gray-400">5 Replies | 1 Week Ago</div>
</div>
</div>
</div>
<!-- Post Input -->
<div class="mt-6">
<h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Start a New Discussion</h4>
<textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-lg focus:outline-none focus:ring focus:ring-blue-400 dark:focus:ring-blue-500" rows="4" placeholder="Write your message..."></textarea>
<button class="mt-2 px-6 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Post</button>
</div>
</div>Componentes relacionados
Componente del Foro de la Comunidad
Un componente complejo del foro de la comunidad, inspirado en el papel y la impresión, para las discusiones sobre el tiempo y el clima, que utiliza un esquema de color complementario y una capacidad de respuesta total con soporte para el modo oscuro.
Componente del Foro de la Comunidad
Un componente responsivo del Foro de la Comunidad diseñado con los principios de Material Design utilizando Tailwind CSS, con soporte para temas oscuros e imágenes de marcador de posición.
Componente del Foro Comunitario (Bauhaus de Comercio Electrónico)
Un componente de foro de la comunidad simple y receptivo diseñado para el comercio electrónico, con formas geométricas inspiradas en la Bauhaus y una paleta de colores apagados. Incluye soporte para modo oscuro.