Composant de fenêtre de chat
Un composant de fenêtre de chat simple conçu dans le style Material Design avec un thème sombre et une mise en page réactive adaptée aux interfaces de médias sociaux.
HTML Code
<div class="h-screen bg-gray-100 dark:bg-gray-800 flex flex-col justify-end">
<div class="max-w-md w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4">
<div class="flex flex-col space-y-4 overflow-y-scroll h-80">
<div class="flex items-start space-x-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
<div class="bg-blue-500 text-white p-2 rounded-lg rounded-bl-none">
Hello, how are you?
</div>
</div>
<div class="flex items-start space-x-2">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
<div class="bg-gray-300 text-gray-800 p-2 rounded-lg rounded-br-none">
I'm good, thanks! How about you?
</div>
</div>
<div class="flex items-start space-x-2">
<img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
<div class="bg-blue-500 text-white p-2 rounded-lg rounded-bl-none">
I'm doing well! Ready for the weekend?
</div>
</div>
</div>
<div class="mt-4 flex">
<input type="text" placeholder="Type your message..." class="flex-1 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-500">
<button class="bg-blue-500 text-white p-2 rounded-lg ml-2 focus:outline-none">Send</button>
</div>
</div>
</div>Composants associés
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.
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif présentant un design 3D moderne avec des couleurs pastel et des fonctionnalités interactives, adapté aux affichages de portfolios.
Composant de fenêtre de chat
Un composant de fenêtre de chat réactif avec prise en charge du mode sombre, conçu pour une utilisation professionnelle avec des micro-interactions subtiles. Utilise une palette de couleurs monochromatique. Aucun JavaScript n’est requis.