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.
Código HTML
<div class="flex flex-col h-96 w-80 sm:w-96 md:w-1/2 lg:w-1/3 mx-auto bg-gray-300 dark:bg-gray-800 border-4 border-black dark:border-white shadow-lg dark:shadow-xl font-mono">
<!-- Header -->
<div class="bg-gray-500 dark:bg-gray-900 text-white dark:text-gray-300 p-2 border-b-4 border-black dark:border-white flex justify-between items-center">
<div class="text-lg font-bold">RetroNET Chat</div>
<div class="flex space-x-1">
<div class="w-3 h-3 bg-red-500 dark:bg-red-700 border border-black dark:border-white cursor-pointer" title="Close"></div>
<div class="w-3 h-3 bg-yellow-500 dark:bg-yellow-600 border border-black dark:border-white cursor-pointer" title="Minimize"></div>
<div class="w-3 h-3 bg-green-500 dark:bg-green-700 border border-black dark:border-white cursor-pointer" title="Maximize"></div>
</div>
</div>
<!-- Messages Area -->
<div class="flex-grow p-4 overflow-y-auto space-y-4">
<!-- Received Message -->
<div class="flex items-start space-x-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
<div class="p-3 rounded-lg max-w-[75%] bg-green-400 dark:bg-green-600 text-black dark:text-white border border-black dark:border-white">
<p>Hello! Welcome to RetroNET Chat. How can I assist you?</p>
</div>
</div>
<!-- Sent Message -->
<div class="flex items-start justify-end space-x-3 flex-row-reverse">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
<div class="p-3 rounded-lg max-w-[75%] bg-blue-400 dark:bg-blue-600 text-black dark:text-white border border-black dark:border-white">
<p>Hi there! I love the retro design!</p>
</div>
</div>
<!-- Received Message with Image -->
<div class="flex items-start space-x-3">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
<div class="p-3 rounded-lg max-w-[75%] bg-green-400 dark:bg-green-600 text-black dark:text-white border border-black dark:border-white">
<p>Glad you like it! Here's a cool retro image:</p>
<img src="https://picsum.photos/id/6/200/150" alt="Random Retro Image" class="mt-2 rounded-lg border-2 border-black dark:border-white max-w-full h-auto">
</div>
</div>
<!-- Sent Message -->
<div class="flex items-start justify-end space-x-3 flex-row-reverse">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
<div class="p-3 rounded-lg max-w-[75%] bg-blue-400 dark:bg-blue-600 text-black dark:text-white border border-black dark:border-white">
<p>Awesome! ✨</p>
</div>
</div>
</div>
<!-- Input Area -->
<div class="p-4 border-t-4 border-black dark:border-white flex space-x-2">
<input type="text" placeholder="Type your message..." class="flex-grow p-2 border-2 border-black dark:border-white bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 placeholder-gray-600 dark:placeholder-gray-400">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded border-2 border-black dark:border-white dark:bg-blue-700 dark:hover:bg-blue-800">
Send
</button>
</div>
</div>Componentes relacionados
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 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
Un componente de ventana de chat receptivo con un esquema de color triádico, microinteracciones y soporte de modo oscuro, diseñado para el comercio electrónico. Cuenta con un encabezado de chat, una lista de mensajes con mensajes del remitente/receptor y una entrada de mensajes.