Componente de ventana de chat
Un componente de ventana de chat neumórfico diseñado para aplicaciones de comercio electrónico, con un modo oscuro y un diseño responsivo que utiliza Tailwind CSS.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-5">
<div class="w-full md:w-96 bg-gray-300 dark:bg-gray-900 rounded-2xl shadow-neumorphic p-6">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
<div class="ml-3">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat Support</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">How can we assist you today?</p>
</div>
</div>
<div class="h-64 overflow-y-auto mb-4 rounded-lg bg-gray-200 dark:bg-gray-700 shadow-md p-3">
<div class="p-2 mb-2 rounded-lg bg-white dark:bg-gray-800 shadow-neumorphic">
<p class="text-gray-800 dark:text-gray-200">Hello! I have some questions about my order.</p>
</div>
<div class="p-2 mb-2 rounded-lg bg-blue-500 dark:bg-blue-700 text-white">
<p>I can help with that!</p>
</div>
<div class="p-2 mb-2 rounded-lg bg-white dark:bg-gray-800 shadow-neumorphic">
<p>When will it be shipped?</p>
</div>
<div class="p-2 mb-2 rounded-lg bg-blue-500 dark:bg-blue-700 text-white">
<p>It should ship within 2-3 business days.</p>
</div>
</div>
<div class="flex">
<input type="text" placeholder="Type your message..." class="flex-grow bg-gray-200 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 p-2 rounded-l-md focus:outline-none focus:border-blue-500 dark:focus:border-blue-400">
<button class="bg-blue-500 dark:bg-blue-700 text-white rounded-r-md px-4">Send</button>
</div>
</div>
</div>
<style>
.shadow-neumorphic {
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2),
-8px -8px 20px rgba(255, 255, 255, 0.5);
}
</style>Componentes relacionados
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
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.
Componente de ventana de chat
Un componente de ventana de chat receptivo diseñado con los principios de Material Design, con un esquema de color otoñal adecuado para organizaciones sin fines de lucro / benéficas. Incluye soporte para el modo oscuro y elementos interactivos como burbujas de mensaje y un campo de entrada.