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.
Código HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-900 justify-center items-center p-4 sm:p-6 lg:p-8 font-sans">
<div class="relative w-full max-w-4xl h-[calc(100vh-4rem)] md:h-[600px] flex flex-col bg-gradient-to-br from-warm-beige-100 to-warm-beige-200 dark:from-gray-800 dark:to-gray-850 rounded-3xl shadow-2xl overflow-hidden transform perspective-1000">
<!-- 3D Overlay/Bevel Effect -->
<div class="absolute inset-0 rounded-3xl pointer-events-none" style="
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 50%, rgba(0,0,0,0.05) 100%),
linear-gradient(225deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), inset 0 0 0 2px rgba(255,255,255,0.05),
inset 5px 5px 10px rgba(0,0,0,0.1), inset -5px -5px 10px rgba(255,255,255,0.05);
filter: blur(0.5px);
"></div>
<!-- Header -->
<div class="flex items-center justify-between p-4 sm:p-5 lg:p-6 border-b border-warm-beige-300/50 dark:border-gray-700/50 shadow-inner-top z-10"
style="box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.05);">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full object-cover shadow-md transition-transform duration-300 hover:scale-105"
src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Alice Johnson</h2>
<p class="text-sm text-gray-600 dark:text-gray-300">Online</p>
</div>
</div>
<div class="flex space-x-3">
<button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.3 11a1 1 0 00.729.584l4.249.708a1 1 0 01.921.235l4.629 4.629a1 1 0 01.235.921l-.708 4.249a1 1 0 00-.584.729L14 20.7a1 1 0 01-.684.948H5a2 2 0 01-2-2V5z"></path></svg>
</button>
<button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 1.5V6a2 2 0 002 2h3.5m-3.5 13.5v-4.5a2 2 0 00-2-2H8"></path></svg>
</button>
</div>
</div>
<!-- Chat Messages Area -->
<div class="flex-1 p-4 sm:p-6 overflow-y-auto space-y-4 md:space-y-6 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600 scrollbar-track-warm-beige-200 dark:scrollbar-track-gray-800">
<!-- Received Message Example (3D card) -->
<div class="flex justify-start">
<div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-warm-beige-300 to-warm-beige-400 dark:from-gray-700 dark:to-gray-750 text-gray-800 dark:text-gray-50 shadow-lg transform -rotate-x-1 duration-200 hover:rotate-x-0 transition-transform"
style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
<p>Hi Alice, how are you doing today? I wanted to check in on the latest project updates.</p>
<span class="block text-xs font-medium text-gray-600 dark:text-gray-300 mt-1 text-right">10:30 AM</span>
<div class="absolute -left-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-warm-beige-400 dark:bg-gray-750 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
</div>
</div>
<!-- Sent Message Example (3D card) -->
<div class="flex justify-end">
<div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-blue-300 to-blue-400 dark:from-blue-600 dark:to-blue-700 text-white shadow-lg transform rotate-x-1 duration-200 hover:rotate-x-0 transition-transform"
style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
<p>I'm good, thanks! The project's on track. I'll send you a brief update document by the end of the day.</p>
<span class="block text-xs font-medium text-blue-100 mt-1 text-left">10:35 AM</span>
<div class="absolute -right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-blue-400 dark:bg-blue-700 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
</div>
</div>
<!-- Another Received Message -->
<div class="flex justify-start">
<div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-warm-beige-300 to-warm-beige-400 dark:from-gray-700 dark:to-gray-750 text-gray-800 dark:text-gray-50 shadow-lg transform -rotate-x-1 duration-200 hover:rotate-x-0 transition-transform"
style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
<p>Sounds perfect! Looking forward to it.</p>
<span class="block text-xs font-medium text-gray-600 dark:text-gray-300 mt-1 text-right">10:36 AM</span>
<div class="absolute -left-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-warm-beige-400 dark:bg-gray-750 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
</div>
</div>
<!-- Image Message (Sent) -->
<div class="flex justify-end">
<div class="relative max-w-[75%] lg:max-w-[60%] p-2 rounded-xl bg-gradient-to-br from-blue-300 to-blue-400 dark:from-blue-600 dark:to-blue-700 text-white shadow-lg transform rotate-x-1 duration-200 hover:rotate-x-0 transition-transform"
style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
<img src="https://picsum.photos/400/300" alt="Image attachment" class="rounded-lg mb-2 shadow-md">
<p class="text-sm">Check out this new dashboard mock-up.</p>
<span class="block text-xs font-medium text-blue-100 mt-1 text-left">10:40 AM</span>
<div class="absolute -right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-blue-400 dark:bg-blue-700 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
</div>
</div>
</div>
<!-- Message Input Area -->
<div class="p-4 sm:p-5 lg:p-6 border-t border-warm-beige-300/50 dark:border-gray-700/50 flex items-center space-x-3 sm:space-x-4 shadow-inner-bottom z-10"
style="box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05), inset 0 1px 0 rgba(0,0,0,0.05), 0 -2px 5px rgba(0,0,0,0.05);">
<button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg>
</button>
<input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-full bg-warm-beige-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 border border-warm-beige-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-warm-beige-400 dark:focus:ring-blue-500 shadow-inner 3d-input-effect"
style="box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1), inset -2px -2px 5px rgba(255,255,255,0.1);">
<button class="p-2 rounded-full bg-gradient-to-br from-blue-400 to-blue-500 dark:from-blue-600 dark:to-blue-700 text-white hover:from-blue-500 hover:to-blue-600 dark:hover:from-blue-700 dark:hover:to-blue-800 transition-colors duration-200 transform hover:scale-105 shadow-lg message-send-button">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</button>
</div>
</div>
</div>
<!-- Custom Styles for 3D effect / Scrollbar / Colors -->
<style>
/* Warm Neutral Colors */
.bg-warm-beige-100 { background-color: #f7f3ed; } /* Lightest */
.bg-warm-beige-200 { background-color: #ede7de; } /* Light */
.bg-warm-beige-300 { background-color: #dcd3c4; } /* Medium */
.bg-warm-beige-300\/70 { background-color: rgba(220, 211, 196, 0.7); }
.bg-warm-beige-400 { background-color: #c9bfb0; } /* Dark */
.border-warm-beige-300 { border-color: #dcd3c4; }
.border-warm-beige-300\/50 { border-color: rgba(220, 211, 196, 0.5); }
.focus\:ring-warm-beige-400:focus { --tw-ring-color: #c9bfb0; }
/* Dark Mode specific background-colors for gradients */
.dark\:from-gray-850 { --tw-gradient-from: #1f2937; --tw-gradient-to: rgba(31, 41, 55, 0); }
.dark\:to-gray-850 { --tw-gradient-to: #1f2937; }
.dark\:from-gray-750 { --tw-gradient-from: #374151; --tw-gradient-to: rgba(55, 65, 81, 0); }
.dark\:to-gray-750 { --tw-gradient-to: #374151; }
/* Custom Scrollbar for Webkit */
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}
.scrollbar-thumb-gray-400 { --tw-scrollbar-thumb: #9ca3af; }
.scrollbar-track-warm-beige-200 { --tw-scrollbar-track: #ede7de; }
.dark .scrollbar-thumb-gray-600 { --tw-scrollbar-thumb: #4b5563; }
.dark .scrollbar-track-gray-800 { --tw-scrollbar-track: #1f2937; }
/* For Chrome, Safari, etc. */
.scrollbar-thin::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: var(--tw-scrollbar-track);
border-radius: var(--tw-scrollbar-track-rounded);
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background-color: var(--tw-scrollbar-thumb);
border-radius: var(--tw-scrollbar-thumb-rounded);
border: 2px solid var(--tw-scrollbar-track);
}
/* Tailwind utility placeholders */
.scrollbar-thumb-rounded-full::-webkit-scrollbar-thumb { border-radius: 9999px; }
.scrollbar-track-rounded-full::-webkit-scrollbar-track { border-radius: 9999px; }
/* 3D specific effects */
.perspective-1000 {
perspective: 1000px;
}
.transform-rotate-x-1 {
transform: rotateX(1deg);
}
.transform--rotate-x-1 {
transform: rotateX(-1deg);
}
.shadow-inner-top {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.05);
}
.shadow-inner-bottom {
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05), inset 0 1px 0 rgba(0,0,0,0.05), 0 -2px 5px rgba(0,0,0,0.05);
}
/* Hide the triangle using clip-path on the bubble pseudo-elements */
.message-send-button {
position: relative;
overflow: hidden;
}
.message-send-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 150%;
height: 150%;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.3s ease-out;
opacity: 0;
}
.message-send-button:hover::before {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
</style>Componentes relacionados
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 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.
Componente de ventana de chat
Un componente de ventana de chat responsivo con soporte de modo oscuro usando Tailwind CSS. Cuenta con un encabezado con información del usuario, un área de mensajes con mensajes entrantes y salientes y un pie de página para escribir nuevos mensajes. Las imágenes son marcadores de posición de picsum.photos y randomuser.me.