Foro de la Comunidad Componente 9
Un componente del Foro de la Comunidad con un diseño de morfismo de vidrio con elementos translúcidos similares al vidrio esmerilado, efectos receptivos y compatibilidad con temas oscuros.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg opacity-80 rounded-lg shadow-lg p-6 max-w-lg w-full">
<h1 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h1>
<div class="space-y-4">
<div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-10 h-10">
<div>
<h2 class="text-gray-800 dark:text-white font-bold">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="rounded-full w-10 h-10">
<div>
<h2 class="text-gray-800 dark:text-white font-bold">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-300">Vivamus laoreet dolor eget lectus tincidunt, et facilisis erat laoreet.</p>
</div>
</div>
<div class="flex items-center space-x-2 bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full w-10 h-10">
<div>
<h2 class="text-gray-800 dark:text-white font-bold">Alex Johnson</h2>
<p class="text-gray-600 dark:text-gray-300">Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
</div>
</div>
</div>
<div class="mt-4">
<textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white" rows="4" placeholder="Write your message..."></textarea>
<button class="mt-2 w-full bg-blue-500 dark:bg-blue-600 text-white rounded-lg py-2 hover:bg-blue-600 dark:hover:bg-blue-700 transition">Post Message</button>
</div>
</div>
</div>Componentes relacionados
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.
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
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.