Componente de ventana de chat
Un componente de ventana de chat minimalista para sitios de comercio electrónico, con un esquema de color en escala de grises, complejidad moderada y capacidad de respuesta con soporte para modo oscuro. Construido con HTML y Tailwind CSS.
Código HTML
<div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900">
<!-- Chat Header -->
<header class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 shadow-md">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
<h1 class="ml-3 text-lg font-semibold text-gray-800 dark:text-white">Customer Support</h1>
</div>
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</header>
<!-- Chat Body -->
<div class="flex-1 overflow-y-auto p-4 space-y-4">
<!-- Incoming Message -->
<div class="flex justify-start">
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-xs">
<p>Hello! How can I help you today?</p>
</div>
</div>
<!-- Outgoing Message -->
<div class="flex justify-end">
<div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
<p>I have a question about my order.</p>
</div>
</div>
<!-- Incoming Message with Avatar -->
<div class="flex justify-start items-start">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/thumb/women/76.jpg" alt="User Avatar">
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-xs">
<p>Ok, please provide your order number.</p>
</div>
</div>
<!-- Outgoing Message with Image -->
<div class="flex justify-end">
<div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-xs">
<p>Here is a screenshot:</p>
<img class="mt-2 rounded-lg" src="https://picsum.photos/id/237/200/150" alt="Order Screenshot">
</div>
</div>
</div>
<!-- Chat Footer (Input Area) -->
<footer class="flex items-center p-4 bg-white dark:bg-gray-800 shadow-md">
<input type="text" placeholder="Type your message..." class="flex-1 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600">
<button class="ml-4 p-2 bg-blue-500 dark:bg-blue-600 text-white rounded-lg hover:bg-blue-600 dark:hover:bg-blue-700">
Send
</button>
</footer>
</div>Componentes relacionados
Componente de ventana de chat
Un componente de ventana de chat responsivo diseñado con una estética inspirada en el papel/impresión, utilizando tonos sepia/marrón. Incluye soporte para modo oscuro y elementos interactivos adecuados para citas o plataformas sociales.
Componente de ventana de chat
Un componente de ventana de chat complejo, de color triádico y centrado en la microinteracción, adecuado para plataformas inmobiliarias. Cuenta con una lista de conversación, un área de chat activa con burbujas de mensajes y un campo de entrada interactivo, todo totalmente receptivo y con soporte para modo oscuro.
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.