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.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 flex items-center justify-center font-sans tracking-wide">
<div class="w-full max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden flex flex-col h-[70vh] md:h-[80vh] lg:h-[75vh]">
<!-- Chat Header -->
<div class="flex items-center justify-between p-4 bg-orange-700 dark:bg-orange-900 text-white shadow-md">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-300" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Chat User Avatar">
<h2 class="text-lg font-semibold">Sarah Jenkins</h2>
</div>
<div class="flex space-x-3">
<button aria-label="Call" class="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
<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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</button>
<button aria-label="Video Call" class="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
<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.872-3.248A1 1 0 0122 7.744v8.512a1 1 0 01-2.128.536L15 14m-5 4v-4a4 4 0 014-4h.5a.5.5 0 01.5.5v3.5a.5.5 0 01-.5.5H10zm0 0a2 2 0 100-4 2 2 0 000 4z"/>
</svg>
</button>
<button aria-label="More Options" class="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
<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 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</button>
</div>
</div>
<!-- Chat Body (Messages) -->
<div class="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-800 scrollbar-thumb-orange-800 dark:scrollbar-thumb-orange-600 scrollbar-track-orange-100 dark:scrollbar-track-gray-700 scrollbar-thin">
<!-- Received Message -->
<div class="flex items-end justify-start">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
<p class="text-gray-800 dark:text-gray-200 text-sm">Hello! Thank you so much for reaching out. We appreciate your interest in our 'Harvest Hope' initiative.</p>
<span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:05 AM</span>
</div>
</div>
<!-- Sent Message -->
<div class="flex items-end justify-end">
<div class="bg-orange-600 dark:bg-orange-700 text-white p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] material-blob-right">
<p class="text-sm">I'm excited to learn more! How can I make a donation, and what impact will it have?</p>
<span class="text-xs text-orange-200 dark:text-orange-300 mt-1 block text-left">10:07 AM</span>
</div>
</div>
<!-- Received Message with longer text -->
<div class="flex items-end justify-start">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
<p class="text-gray-800 dark:text-gray-200 text-sm">You can donate directly through our website at <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">[Your Charity Website Link]</a>. Every contribution helps us provide food, shelter, and education to those in need, especially during this season.</p>
<span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:08 AM</span>
</div>
</div>
<!-- Sent Message with image -->
<div class="flex items-end justify-end">
<div class="bg-orange-600 dark:bg-orange-700 text-white p-2 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] material-blob-right">
<img src="https://picsum.photos/300/200?random=1" alt="Image attachment" class="rounded-lg mb-2 shadow-lg w-full h-auto object-cover">
<p class="text-sm">This looks like a wonderful cause! Here's a photo from our recent charity drive to share some inspiration.</p>
<span class="text-xs text-orange-200 dark:text-orange-300 mt-1 block text-left">10:10 AM</span>
</div>
</div>
<!-- Received message with another user -->
<div class="flex items-end justify-start">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Another User Avatar">
<div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
<p class="text-gray-800 dark:text-gray-200 text-sm">Thanks for sharing that, John! It's inspiring to see the community come together.</p>
<span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:12 AM</span>
</div>
</div>
</div>
<!-- Chat Input -->
<div class="p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-inner flex items-center space-x-2">
<button aria-label="Attach File" class="p-2 text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75 rounded-full">
<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" />
</svg>
</button>
<input type="text" placeholder="Type a message..." aria-label="Chat message input" class="flex-1 p-3 rounded-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-600 focus:border-transparent text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400">
<button aria-label="Send Message" class="p-2 bg-orange-600 dark:bg-orange-700 text-white rounded-full shadow-md hover:bg-orange-700 dark:hover:bg-orange-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-45 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</div>
</div>
</div>
<style>
/* Custom scrollbar for Webkit browsers */
.scrollbar-thin::-webkit-scrollbar {
width: 8px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: var(--tw-scrollbar-track-color, transparent);
border-radius: 10px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background: var(--tw-scrollbar-thumb-color);
border-radius: 10px;
border: 2px solid var(--tw-scrollbar-track-color, transparent);
}
/* Fallback for Firefox and other browsers, using standard properties where possible */
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: var(--tw-scrollbar-thumb-color) var(--tw-scrollbar-track-color);
}
/* Tailwind utility classes for scrollbar */
.scrollbar-thumb-orange-800 {
--tw-scrollbar-thumb-color: #9A3412;
}
.dark\:scrollbar-thumb-orange-600 {
--tw-scrollbar-thumb-color: #DDAA55;
}
.scrollbar-track-orange-100 {
--tw-scrollbar-track-color: #FFF7ED;
}
.dark\:scrollbar-track-gray-700 {
--tw-scrollbar-track-color: #374151;
}
/* Material Design-inspired blob shapes for message bubbles */
.material-blob-left {
border-top-left-radius: 4px; /* Slight adjustment for a less sharp corner */
}
.material-blob-right {
border-top-right-radius: 4px; /* Slight adjustment for a less sharp corner */
}
</style>Componentes relacionados
Componente de ventana de chat
Un componente de ventana de chat receptivo con soporte para modo oscuro, diseñado para uso empresarial con microinteracciones sutiles. Utiliza un esquema de color monocromático. No se requiere JavaScript.
Componente de ventana de chat
Un componente de ventana de chat diseñado en estilo brutalismo con alto contraste, efectos responsivos y compatibilidad con temas oscuros.
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.