Componente de ventana de chat
Un componente de ventana de chat simple, receptivo e inspirado en 3D con una combinación de colores pastel, diseñado para un portafolio para mostrar trabajos o productos. Incluye soporte para el modo oscuro.
Código HTML
<div class="flex flex-col h-screen bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-800 dark:to-gray-900">
<header class="p-4 bg-white dark:bg-gray-700 shadow-md relative z-10">
<h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Chat Window</h1>
</header>
<div class="flex-1 p-4 overflow-y-auto">
<!-- Incoming Message -->
<div class="flex items-end mb-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-lg">
<div class="bg-indigo-200 dark:bg-indigo-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
Hi there! This is an example of an incoming message in 3D.
</div>
</div>
<!-- Outgoing Message -->
<div class="flex justify-end items-end mb-4">
<div class="bg-purple-200 dark:bg-purple-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
And this is an outgoing message, also with a cool 3D effect!
</div>
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 shadow-lg">
</div>
<!-- Another Incoming Message -->
<div class="flex items-end mb-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-lg">
<div class="bg-indigo-200 dark:bg-indigo-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
The pastel colors give it a soft and inviting feel.
</div>
</div>
<!-- Another Outgoing Message -->
<div class="flex justify-end items-end mb-4">
<div class="bg-purple-200 dark:bg-purple-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
And it's simple enough for a portfolio showcase!
</div>
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 shadow-lg">
</div>
</div>
<footer class="p-4 bg-white dark:bg-gray-700 shadow-md relative z-10">
<div class="flex">
<input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-300 dark:focus:ring-indigo-600 shadow-inner">
<button class="ml-3 px-6 py-3 bg-indigo-400 dark:bg-indigo-600 text-white rounded-lg font-semibold shadow-md hover:bg-indigo-500 dark:hover:bg-indigo-700 transition-colors duration-300">Send</button>
</div>
</footer>
</div>Componentes relacionados
RetroChatWindow
Un componente de ventana de chat de estilo retro/vintage que utiliza Tailwind CSS, con diseño responsivo y compatibilidad con el modo oscuro. Incluye mensajes de marcador de posición y avatares. Sin JavaScript.
Componente de ventana de chat
Un componente de ventana de chat responsivo diseñado con los principios de Material Design y Tailwind CSS, con soporte para modo oscuro.
Componente de ventana de chat
Un componente de ventana de chat receptivo diseñado para uso empresarial/corporativo, con una interfaz de usuario de modo oscuro con un esquema de color complementario. Incluye mensajes de marcador de posición, lista de contactos y área de entrada.