Componente de ventana de chat
Un componente de ventana de chat receptivo con soporte para modo oscuro, diseñado para uso empresarial con microinteracciones sutiles. Utiliza un esquema de color monocromático. No se requiere JavaScript.
Código HTML
<div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<div class="flex-1 overflow-y-auto p-4">
<!-- Chat messages go here -->
<div class="flex items-end mb-4">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg max-w-xs">
<p class="text-sm">Hello! How can I help you today?</p>
</div>
</div>
<div class="flex items-end justify-end mb-4">
<div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
<p class="text-sm">I have a question about my order.</p>
</div>
<img class="w-8 h-8 rounded-full ml-2" src="https://randomuser.me/api/portraits/women/33.jpg" alt="Avatar">
</div>
<!-- More messages -->
</div>
<div class="bg-white dark:bg-gray-800 p-4">
<div class="flex items-center">
<input type="text" placeholder="Type your message..." class="flex-1 border border-gray-300 dark:border-gray-700 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<button class="ml-2 bg-blue-500 dark:bg-blue-700 text-white rounded-full p-2 hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform transition duration-300 ease-in-out hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</button>
</div>
</div>
</div>Componentes relacionados
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.
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 componente de ventana de chat simple con microinteracciones, diseño receptivo y soporte de temas oscuros, adecuado para blogs o consumo de contenido.