Componente de ventana de chat
Un componente de ventana de chat simple diseñado con elementos 3D, combinación de colores en tonos tierra y soporte de tema oscuro receptivo.
Código HTML
<div class="max-w-md mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="bg-green-600 dark:bg-green-700 p-4">
<h2 class="text-white text-lg font-semibold">Chat Window</h2>
</div>
<div class="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 class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
<p class="text-gray-800 dark:text-gray-200">Hello! How can I help you today?</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 class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
<p class="text-gray-800 dark:text-gray-200">I'm looking for more information about your services.</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 class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
<p class="text-gray-800 dark:text-gray-200">Sure! Please check our portfolio.</p>
</div>
</div>
<div class="flex items-center">
<input type="text" placeholder="Type your message..." class="flex-1 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 shadow-sm" />
<button class="ml-2 bg-green-600 dark:bg-green-700 text-white px-4 py-2 rounded-lg shadow-lg">Send</button>
</div>
</div>
</div>Componentes relacionados
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.
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
Un componente simple de ventana de chat al estilo de Glassmorphism con un esquema de color pastel, diseñado para el consumo de contenido. Cuenta con un diseño responsivo y soporte para temas oscuros.