SkeuomorphicChatWindow
Un composant Web de fenêtre de chat stylisé avec Skeuomorphism et Tailwind CSS. Dispose d’une mise en page réactive, d’une prise en charge des thèmes sombres via CSS, de bulles de message arrondies, de dégradés et d’ombres pour une sensation tactile. Comprend des avatars et des images de repère. Aucun JavaScript inclus.
HTML Code
<div class="flex flex-col w-full max-w-sm md:max-w-md lg:max-w-lg mx-auto my-8 rounded-lg overflow-hidden shadow-2xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 dark:text-white">
<!-- Header -->
<div class="flex items-center p-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-md dark:from-blue-800 dark:to-blue-900">
<img class="w-8 h-8 rounded-full mr-3 border-2 border-white shadow" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
<span class="font-semibold text-lg">John Doe</span>
</div>
<!-- Messages Area -->
<div class="flex-1 p-4 h-64 overflow-y-auto space-y-4 bg-gray-50 dark:bg-gray-800">
<!-- Received Message -->
<div class="flex items-end">
<img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
<div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
<p>Hey, how's it going?</p>
</div>
</div>
<!-- Sent Message -->
<div class="flex items-end justify-end">
<div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
<p>I'm doing well, thanks! How about you?</p>
</div>
<img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
</div>
<!-- Received Image Message -->
<div class="flex items-end">
<img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
<div class="max-w-[70%] rounded-lg overflow-hidden shadow-md">
<img src="https://picsum.photos/id/237/200/150" alt="Image message" class="w-full h-auto object-cover">
</div>
</div>
<!-- Sent Image Message -->
<div class="flex items-end justify-end">
<div class="max-w-[70%] rounded-lg overflow-hidden shadow-md">
<img src="https://picsum.photos/id/23/200/150" alt="Image message" class="w-full h-auto object-cover">
</div>
<img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
</div>
<!-- More messages for scrolling -->
<div class="flex items-end">
<img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
<div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="flex items-end justify-end">
<div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
</div>
<div class="flex items-end">
<img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
<div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="flex items-end justify-end">
<div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
</div>
</div>
<!-- Input Area -->
<div class="flex items-center p-3 border-t border-gray-300 bg-gray-100 dark:border-gray-600 dark:bg-gray-700">
<input type="text" placeholder="Type a message..." class="flex-1 rounded-lg px-4 py-2 mr-3 bg-white border border-gray-300 dark:bg-gray-600 dark:border-gray-500 dark:text-white dark:placeholder-gray-400 shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500">
<button class="px-4 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg shadow-md hover:from-green-600 hover:to-green-700 dark:from-green-700 dark:to-green-800 dark:hover:from-green-800 dark:hover:to-green-900">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.
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.
Composant de fenêtre de chat
Un composant de fenêtre de chat conçu dans le style Brutalism avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre.