Componente de ventana de chat
Un componente de ventana de chat diseñado en estilo brutalismo con alto contraste, efectos responsivos y compatibilidad con temas oscuros.
Código HTML
<div class="max-w-lg mx-auto mt-10 p-4 bg-gray-100 rounded-lg shadow-lg dark:bg-gray-800 border-2 border-black dark:border-gray-600">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-bold text-black dark:text-white">Chat Room</h2>
<button class="px-3 py-1 text-sm font-semibold text-white bg-blue-600 rounded hover:bg-blue-500 focus:outline-none">Join</button>
</div>
<div class="border-2 border-black dark:border-gray-600 h-64 overflow-y-scroll p-4">
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<span class="font-bold text-black dark:text-white">John Doe:</span>
<p class="text-black dark:text-gray-200">Hello! How is everyone?</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<span class="font-bold text-black dark:text-white">Jane Smith:</span>
<p class="text-black dark:text-gray-200">I'm doing great, thanks for asking!</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<span class="font-bold text-black dark:text-white">Mike Brown:</span>
<p class="text-black dark:text-gray-200">Excited for the weekend!</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<span class="font-bold text-black dark:text-white">Emily White:</span>
<p class="text-black dark:text-gray-200">Same here! Any plans?</p>
</div>
</div>
</div>
<div class="mt-4">
<textarea rows="3" class="w-full p-2 border-2 border-black dark:border-gray-600 rounded" placeholder="Type a message..."></textarea>
<button class="mt-2 px-3 py-1 text-sm font-semibold text-white bg-green-600 rounded hover:bg-green-500 focus:outline-none">Send</button>
</div>
</div>Componentes relacionados
Componente de ventana de chat
Un componente de ventana de chat simple, receptivo e inspirado en 3D con una combinación de colores pastel, diseñado para un portafolio para mostrar trabajos o productos. Incluye soporte para el modo oscuro.
Componente de ventana de chat con diseño 3D, capacidad de respuesta y modo oscuro
Un componente de ventana de chat responsivo con elementos de diseño 3D y soporte de temas oscuros usando Tailwind CSS. Incluye avatares e imágenes de marcador de posición.
Componente de ventana de chat
Un complejo componente de ventana de chat inspirado en 3D con una paleta de colores bosque/verde, diseñado para aplicaciones industriales/de fabricación, con capacidad de respuesta y compatibilidad con el modo oscuro.