Componente del Foro de la Comunidad
Un componente receptivo del foro de la comunidad diseñado en estilo Glassmorphism con tonos tierra, adecuado para plataformas de redes sociales. Cuenta con un efecto de vidrio esmerilado y es compatible con el modo oscuro.
Código HTML
<div class="min-h-screen bg-gray-800 flex flex-col items-center justify-center p-10">
<div class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-3xl w-full">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Community Forum</h1>
<div class="space-y-4">
<!-- Post Example -->
<div class="bg-white bg-opacity-20 rounded-lg p-4 shadow-md">
<div class="flex items-center">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<h2 class="font-semibold text-gray-900 dark:text-white">John Doe</h2>
<span class="text-sm text-gray-600 dark:text-gray-300">2 hours ago</span>
</div>
</div>
<p class="mt-2 text-gray-800 dark:text-gray-200">What do you all think about the latest trends in technology?</p>
</div>
<!-- Post Example -->
<div class="bg-white bg-opacity-20 rounded-lg p-4 shadow-md">
<div class="flex items-center">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="ml-3">
<h2 class="font-semibold text-gray-900 dark:text-white">Jane Smith</h2>
<span class="text-sm text-gray-600 dark:text-gray-300">1 hour ago</span>
</div>
</div>
<p class="mt-2 text-gray-800 dark:text-gray-200">I believe we are on the cusp of major changes in this field!</p>
</div>
</div>
<div class="mt-6">
<textarea class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white bg-opacity-20 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" rows="3" placeholder="Share your thoughts..."></textarea>
<button class="mt-2 w-full py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">Post</button>
</div>
</div>
</div>Componentes relacionados
Componente del Foro de la Comunidad
Componente del foro de la comunidad con diseño de Glassmorphism, combinación de colores vibrantes, nivel de complejidad complejo, para fines de blog / contenido, diseño receptivo con soporte de tema oscuro, utilizando Tailwind CSS.
Componente del Foro de la Comunidad
Un componente responsivo del foro de la comunidad diseñado en modo oscuro usando Tailwind CSS. El componente presenta un fondo oscuro para reducir la fatiga visual e incluye imágenes de marcador de posición para avatares y publicaciones en foros.
Componente del Foro de la Comunidad
Un componente simple del foro de la comunidad con una combinación de colores pastel, influencias de Material Design y compatibilidad con el modo oscuro. Cuenta con un diseño responsivo para el consumo de blog/contenido.