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.
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-md">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Community Forum</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/100" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">John Doe</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Understanding Material Design</h2>
<p class="text-gray-600 dark:text-gray-300">This post discusses the key principles of Material Design and how to implement them effectively using Tailwind CSS.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/101" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/10.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">Jane Smith</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Tailwind CSS for Beginners</h2>
<p class="text-gray-600 dark:text-gray-300">A beginner's guide to Tailwind CSS, exploring its utility-first approach and customization options.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/102" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/20.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">Michael Johnson</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Accessibility in Design</h2>
<p class="text-gray-600 dark:text-gray-300">Exploring the importance of accessibility in design and how to ensure your designs are inclusive.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/103" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/20.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">Emily Davis</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Responsive Web Design</h2>
<p class="text-gray-600 dark:text-gray-300">Learn how to create responsive web designs that adapt to different screen sizes and devices.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente del Foro de la Comunidad
Un componente de foro comunitario receptivo e interactivo con estilo de diseño Neumorphism, adecuado para sitios web comerciales / corporativos, que admite temas claros y oscuros.
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 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.