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 moderno y receptivo con una estética de diseño 3D, un esquema de color neutro cálido y soporte completo para el modo oscuro, adecuado para aplicaciones de tecnología / SaaS.
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 complejo y receptivo con una estética de diseño monoespaciado/desarrollador, combinación de colores otoñal, optimizado para aplicaciones deportivas/físicas, incluida la compatibilidad con el modo oscuro y elementos interactivos.