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 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.
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.
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.