Componente de ventana de chat
Un componente de ventana de chat simple, receptivo, inspirado en Material Design con tonos cálidos al atardecer, adecuado para sitios web comerciales y corporativos, compatible con el modo oscuro.
Código HTML
<div class="flex flex-col h-[700px] w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-md lg:max-w-lg">
<!-- Header -->
<div class="flex items-center justify-between p-4 bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700 text-white shadow-md">
<div class="flex items-center space-x-3">
<img class="h-10 w-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
<div>
<h3 class="text-lg font-semibold">Olivia Martin</h3>
<p class="text-sm opacity-90">Online</p>
</div>
</div>
<button class="p-1 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Chat Messages Area -->
<div class="flex-1 p-4 overflow-y-auto bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
<!-- Incoming Message -->
<div class="flex items-start mb-4">
<img class="h-9 w-9 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-xl max-w-[75%] shadow-sm">
<p class="text-sm">Hello! How can I assist you today regarding your last order?</p>
<span class="block text-xs text-right text-gray-500 dark:text-gray-400 mt-1">10:05 AM</span>
</div>
</div>
<!-- Outgoing Message -->
<div class="flex justify-end mb-4">
<div class="bg-red-500 dark:bg-red-600 text-white p-3 rounded-xl max-w-[75%] shadow-sm">
<p class="text-sm">Hi Olivia, I have a question about the shipping status. My order number is #12345.</p>
<span class="block text-xs text-right text-white text-opacity-80 mt-1">10:07 AM</span>
</div>
</div>
<!-- Incoming Message -->
<div class="flex items-start mb-4">
<img class="h-9 w-9 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-xl max-w-[75%] shadow-sm">
<p class="text-sm">Certainly! Let me check that for you. Please wait a moment.</p>
<span class="block text-xs text-right text-gray-500 dark:text-gray-400 mt-1">10:08 AM</span>
</div>
</div>
<!-- Outgoing Message -->
<div class="flex justify-end mb-4">
<div class="bg-red-500 dark:bg-red-600 text-white p-3 rounded-xl max-w-[75%] shadow-sm">
<p class="text-sm">Thanks!</p>
<span class="block text-xs text-right text-white text-opacity-80 mt-1">10:09 AM</span>
</div>
</div>
</div>
<!-- Message Input -->
<div class="p-4 bg-white dark:bg-gray-800 flex items-center space-x-3 border-t border-gray-200 dark:border-gray-700">
<input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-600 shadow-inner transition-colors duration-200">
<button class="bg-orange-500 dark:bg-orange-600 text-white p-3 rounded-full hover:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 shadow-md transition-colors duration-200">
<svg class="w-6 h-6 -rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
</button>
</div>
</div>Componentes relacionados
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.
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 receptivo diseñado para uso empresarial/corporativo, con una interfaz de usuario de modo oscuro con un esquema de color complementario. Incluye mensajes de marcador de posición, lista de contactos y área de entrada.