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 de fenêtre de chat
Un composant de fenêtre de chat réactif conçu selon les principes de Material Design, avec une palette de couleurs automnale adaptée aux organisations à but non lucratif/caritatives. Comprend la prise en charge du mode sombre et des éléments interactifs tels que des bulles de message et un champ de saisie.
Composant de fenêtre de chat
Composant de fenêtre de chat réactif conçu pour une utilisation professionnelle, doté d’une interface utilisateur en mode sombre avec une palette de couleurs complémentaire. Comprend des messages de remplacement, une liste de contacts et une zone de saisie.