Chat Window Component - Travel/Tourism Skeuomorphic
A complex, responsive chat window component designed for travel/tourism websites, featuring a skeuomorphic style with an analogous color scheme and dark mode support.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 flex items-center justify-center font-sans">
<div class="w-full max-w-4xl h-[80vh] min-h-[600px] flex flex-col rounded-3xl shadow-2xl overflow-hidden
bg-gradient-to-br from-blue-200 to-indigo-200 dark:from-gray-700 dark:to-gray-900
border-4 border-solid border-blue-300 dark:border-gray-600
p-1 sm:p-2">
<!-- Chat Window Glassmorphic Frame -->
<div class="flex-1 flex flex-col bg-white/60 dark:bg-gray-800/60 backdrop-blur-md rounded-2xl shadow-inner-lg shadow-blue-400/30 dark:shadow-gray-900/30
relative overflow-hidden">
<!-- Header Bar -->
<div class="flex items-center justify-between p-4 sm:p-5 border-b border-white/50 dark:border-gray-700/50
bg-blue-300/80 dark:bg-gray-800/80 rounded-t-2xl shadow-md z-10
text-blue-900 dark:text-gray-100 font-semibold text-lg sm:text-xl">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden border-2 border-blue-500 dark:border-gray-500 shadow-md">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Operator Avatar" class="w-full h-full object-cover">
</div>
<div>
<p>Travel Assistant</p>
<p class="text-sm text-blue-800 dark:text-gray-300 font-normal">Online</p>
</div>
</div>
<div class="flex space-x-3 text-blue-700 dark:text-gray-300">
<button class="p-2 rounded-full hover:bg-blue-400/50 dark:hover:bg-gray-700/50 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg></button>
<button class="p-2 rounded-full hover:bg-blue-400/50 dark:hover:bg-gray-700/50 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg></button>
</div>
</div>
<!-- Chat Messages Area -->
<div class="flex-1 p-4 sm:p-6 overflow-y-auto custom-scrollbar">
<!-- Operator Message -->
<div class="flex items-start mb-6">
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-blue-400 dark:border-gray-500 shadow-md flex-shrink-0">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Operator Avatar" class="w-full h-full object-cover">
</div>
<div class="ml-3 sm:ml-4 bg-gradient-to-br from-blue-300 to-indigo-300 dark:from-gray-700 dark:to-gray-800 p-3 sm:p-4 rounded-xl rounded-bl-none max-w-[75%] shadow-lg border border-blue-400 dark:border-gray-600 relative">
<div class="absolute -left-2 top-0 w-4 h-4 bg-blue-300 dark:bg-gray-700 rounded-br-full -z-10"></div>
<p class="text-sm sm:text-base text-blue-900 dark:text-gray-100">Hello! I'm your travel assistant. How can I help you plan your next adventure?</p>
</div>
</div>
<!-- User Message -->
<div class="flex justify-end items-start mb-6">
<div class="mr-3 sm:mr-4 bg-gradient-to-br from-purple-200 to-pink-200 dark:from-gray-600 dark:to-gray-700 p-3 sm:p-4 rounded-xl rounded-br-none max-w-[75%] shadow-lg border border-purple-300 dark:border-gray-500 relative">
<div class="absolute -right-2 top-0 w-4 h-4 bg-purple-200 dark:bg-gray-600 rounded-bl-full -z-10"></div>
<p class="text-sm sm:text-base text-purple-900 dark:text-gray-100">Hi! I'm looking for a tropical getaway in December. Any recommendations?</p>
</div>
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-purple-400 dark:border-gray-500 shadow-md flex-shrink-0">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-full h-full object-cover">
</div>
</div>
<!-- Operator Message with Image -->
<div class="flex items-start mb-6">
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-blue-400 dark:border-gray-500 shadow-md flex-shrink-0">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Operator Avatar" class="w-full h-full object-cover">
</div>
<div class="ml-3 sm:ml-4 bg-gradient-to-br from-blue-300 to-indigo-300 dark:from-gray-700 dark:to-gray-800 p-3 sm:p-4 rounded-xl rounded-bl-none max-w-[75%] shadow-lg border border-blue-400 dark:border-gray-600 relative">
<div class="absolute -left-2 top-0 w-4 h-4 bg-blue-300 dark:bg-gray-700 rounded-br-full -z-10"></div>
<p class="text-sm sm:text-base text-blue-900 dark:text-gray-100 mb-2">December is perfect for the Caribbean! How about a relaxing stay in Barbados?</p>
<img src="https://picsum.photos/400/250?random=1" alt="Barbados Beach" class="rounded-lg mt-2 shadow-md border border-blue-400/50 dark:border-gray-600/50">
<p class="text-xs text-blue-800 dark:text-gray-300 mt-2">Click for details or more options!</p>
</div>
</div>
<!-- User Message, more text -->
<div class="flex justify-end items-start mb-6">
<div class="mr-3 sm:mr-4 bg-gradient-to-br from-purple-200 to-pink-200 dark:from-gray-600 dark:to-gray-700 p-3 sm:p-4 rounded-xl rounded-br-none max-w-[75%] shadow-lg border border-purple-300 dark:border-gray-500 relative">
<div class="absolute -right-2 top-0 w-4 h-4 bg-purple-200 dark:bg-gray-600 rounded-bl-full -z-10"></div>
<p class="text-sm sm:text-base text-purple-900 dark:text-gray-100">Barbados sounds lovely! What about flight and accommodation packages? I'm looking for something all-inclusive and relaxing, perhaps a resort with spa facilities.</p>
</div>
<div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-purple-400 dark:border-gray-500 shadow-md flex-shrink-0">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-full h-full object-cover">
</div>
</div>
</div>
<!-- Input Area -->
<div class="p-4 sm:p-5 flex items-center space-x-3 sm:space-x-4 border-t border-white/50 dark:border-gray-700/50
bg-gradient-to-r from-blue-300/80 to-indigo-300/80 dark:from-gray-800/80 dark:to-gray-900/80
rounded-b-2xl shadow-inner-lg shadow-blue-400/30 dark:shadow-gray-900/30 z-10">
<button class="p-2 rounded-full bg-blue-400 hover:bg-blue-500 dark:bg-gray-600 dark:hover:bg-gray-500
text-white shadow-md transition-colors duration-200 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" 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.5" /></svg>
</button>
<input type="text" placeholder="Type your message..." class="flex-1 p-3 sm:p-4 rounded-xl
bg-white/80 dark:bg-gray-700/80 border border-blue-400 dark:border-gray-600
text-blue-900 dark:text-gray-100 placeholder-blue-700/70 dark:placeholder-gray-300/70
shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-gray-500
transition-all duration-200 text-sm sm:text-base">
<button class="p-2 rounded-full bg-blue-500 hover:bg-blue-600 dark:bg-purple-600 dark:hover:bg-purple-700
text-white shadow-lg transition-colors duration-200 flex-shrink-0 rotate-45 -mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
</button>
</div>
</div>
</div>
<!-- Custom Scrollbar Styles (typically in a separate CSS file or a style tag if compiled) -->
<style>
.custom-scrollbar::-webkit-scrollbar {
width: 10px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(var(--tw-fill-blue-200), 0.5); /* Using Tailwind var for blue-200 */
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(var(--tw-fill-blue-500), 0.7); /* Using Tailwind var for blue-500 */
border-radius: 10px;
border: 2px solid rgba(var(--tw-fill-blue-200), 0.5); /* Match track color */
}
.custom-scrollbar::-m-scrollbar-thumb {
background-color: rgba(var(--tw-fill-blue-500), 0.7);
border-radius: 10px;
border: 2px solid rgba(var(--tw-fill-blue-200), 0.5);
}
/* Dark mode scrollbar styles */
.dark .custom-scrollbar::-webkit-scrollbar-track {
background: rgba(var(--tw-fill-gray-800), 0.5);
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(var(--tw-fill-gray-600), 0.7);
border: 2px solid rgba(var(--tw-fill-gray-800), 0.5);
}
.dark .custom-scrollbar::-m-scrollbar-thumb {
background-color: rgba(var(--tw-fill-gray-600), 0.7);
border: 2px solid rgba(var(--tw-fill-gray-800), 0.5);
}
.shadow-inner-lg {
box-shadow: inset 0 0px 15px rgba(0, 0, 0, 0.1), inset 0 0px 8px rgba(0, 0, 0, 0.05);
}
.dark .shadow-inner-lg {
box-shadow: inset 0 0px 15px rgba(0, 0, 0, 0.4), inset 0 0px 8px rgba(0, 0, 0, 0.2);
}
</style>
<!-- Emulate Tailwind CSS variables for custom scrollbar (for browser compatibility) -->
<script>
document.documentElement.style.setProperty('--tw-fill-blue-100', '219, 234, 254');
document.documentElement.style.setProperty('--tw-fill-blue-200', '191, 219, 254');
document.documentElement.style.setProperty('--tw-fill-blue-300', '147, 197, 253');
document.documentElement.style.setProperty('--tw-fill-blue-400', '96, 165, 250');
document.documentElement.style.setProperty('--tw-fill-blue-500', '59, 130, 246');
document.documentElement.style.setProperty('--tw-fill-purple-100', '233, 213, 255');
document.documentElement.style.setProperty('--tw-fill-purple-200', '221, 214, 254');
document.documentElement.style.setProperty('--tw-fill-purple-300', '196, 181, 253');
document.documentElement.style.setProperty('--tw-fill-gray-700', '55, 65, 81');
document.documentElement.style.setProperty('--tw-fill-gray-800', '31, 41, 55');
document.documentElement.style.setProperty('--tw-fill-gray-900', '17, 24, 39');
document.documentElement.style.setProperty('--tw-fill-gray-600', '75, 85, 99');
document.documentElement.style.setProperty('--tw-fill-gray-500', '107, 114, 128');
// Toggles dark mode for demonstration
// For a real app, integrate with your theme management
// function toggleDarkMode() {
// document.documentElement.classList.toggle('dark');
// }
// document.addEventListener('DOMContentLoaded', () => {
// // Check for preferred theme or user setting
// if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
// document.documentElement.classList.add('dark');
// } else {
// document.documentElement.classList.remove('dark');
// }
// });
</script>
</div>Related Components
Chat Window Component
A Chat Window Component designed in Brutalism style with high contrast, responsive effects, and dark theme support.
Simple Brutalist Chat Window
Brutalist simple grayscale chat window component for blog content consumption with dark mode and responsive design
Chat Window Component
A complex 3D-inspired chat window component with a forest/green palette, designed for manufacturing/industrial applications, featuring responsiveness and dark mode support.