Componente del Foro de la Comunidad
Un componente de foro comunitario simple y receptivo con una combinación de colores cálidos inspirada en la puesta de sol, adecuada para plataformas sociales o de citas. Cuenta con sombras similares a las de Material Design e incluye soporte para el modo oscuro.
Código HTML
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in transition-shadow duration-300 dark:shadow-2xl dark:shadow-orange-900/20">
<div class="bg-gradient-to-r from-orange-400 to-red-500 p-4 sm:p-5 flex items-center justify-between shadow-md">
<h2 class="text-white text-lg sm:text-xl font-semibold">Community Buzz</h2>
<button class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</button>
</div>
<div class="p-4 sm:p-5 space-y-4">
<!-- Forum Post 1 -->
<div class="flex items-start space-x-3 sm:space-x-4">
<img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-orange-300 dark:ring-orange-600 object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<p class="font-semibold text-gray-800 dark:text-gray-100 text-sm sm:text-base">Sarah_Loves_Sunsets</p>
<span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mt-0.5">"Anyone else feel like this community has the best vibes? So much positivity! ✨"</p>
<div class="flex items-center space-x-3 mt-2">
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
54
</button>
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
12
</button>
</div>
</div>
</div>
<hr class="border-gray-200 dark:border-gray-700">
<!-- Forum Post 2 -->
<div class="flex items-start space-x-3 sm:space-x-4">
<img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-orange-300 dark:ring-orange-600 object-cover" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between">
<p class="font-semibold text-gray-800 dark:text-gray-100 text-sm sm:text-base">Traveler_Mike</p>
<span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mt-0.5">"Just joined! Looking forward to connecting with amazing people here. Where's everyone from?"</p>
<div class="flex items-center space-x-3 mt-2">
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
31
</button>
<button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
8
</button>
</div>
</div>
</div>
</div>
<div class="p-4 sm:p-5 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center space-x-3">
<img class="w-9 h-9 sm:w-10 sm:h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Your Avatar">
<input type="text" placeholder="Write a new post..." class="flex-1 p-2 sm:p-2.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 dark:border-none border border-gray-300">
<button class="p-2 rounded-full bg-orange-500 text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente del Foro Comunitario Brutalista
Un componente de foro comunitario de estilo brutalista para interfaces de redes sociales con colores vibrantes, complejidad moderada y compatibilidad con modo oscuro. Cuenta con una lista de publicaciones en el foro con tipografía audaz, elementos de alto contraste y diseños asimétricos típicos del diseño brutalista. Incluye elementos de publicación con avatares de usuario, botones de interacción y una estética cruda e intencionalmente cruda con acentos de colores vibrantes.
Componente del Foro de la Comunidad
Un componente de foro comunitario receptivo diseñado con los principios de Material Design, adecuado para el blog y el consumo de contenido. Cuenta con un diseño de cuadrícula, elementos interactivos y admite temas oscuros usando Tailwind CSS.
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.