RetroChatWindow
Un composant de fenêtre de chat de style rétro/vintage utilisant Tailwind CSS, avec un design réactif et une prise en charge du mode sombre. Comprend des messages et des avatars de remplacement. Pas de JavaScript.
HTML Code
<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>Composants associés
Composant de fenêtre de chat
Un composant de fenêtre de chat simple, de style Glassmorphism, avec une palette de couleurs pastel, conçu pour la consommation de contenu. Il dispose d’une mise en page réactive et d’un support de thème sombre.
Composant 50 de la fenêtre de chat
Un composant de fenêtre de chat minimaliste avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend des images d’espace réservé et des images d’avatar provenant de sources d’espace réservé aléatoires.
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Il comporte un en-tête avec des informations sur l’utilisateur, une zone de message avec les messages entrants et sortants, et un pied de page pour taper de nouveaux messages. Les images sont des espaces réservés de picsum.photos et randomuser.me.