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 50
Un componente minimalista de la ventana de chat con diseño responsivo y soporte de modo oscuro usando Tailwind CSS. Incluye imágenes de marcador de posición e imágenes de avatar de fuentes de marcador de posición aleatorias.
Componente de ventana de chat
Un componente de ventana de chat receptivo con un esquema de color triádico, microinteracciones y soporte de modo oscuro, diseñado para el comercio electrónico. Cuenta con un encabezado de chat, una lista de mensajes con mensajes del remitente/receptor y una entrada de mensajes.
Componente de ventana de chat
Un componente de ventana de chat responsivo con soporte de modo oscuro usando Tailwind CSS. Cuenta con un encabezado con información del usuario, un área de mensajes con mensajes entrantes y salientes y un pie de página para escribir nuevos mensajes. Las imágenes son marcadores de posición de picsum.photos y randomuser.me.