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.
HTML Code
<div class="max-w-lg mx-auto mt-10 p-4 bg-gray-100 rounded-lg shadow-lg dark:bg-gray-800 border-2 border-black dark:border-gray-600">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-bold text-black dark:text-white">Chat Room</h2>
<button class="px-3 py-1 text-sm font-semibold text-white bg-blue-600 rounded hover:bg-blue-500 focus:outline-none">Join</button>
</div>
<div class="border-2 border-black dark:border-gray-600 h-64 overflow-y-scroll p-4">
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<span class="font-bold text-black dark:text-white">John Doe:</span>
<p class="text-black dark:text-gray-200">Hello! How is everyone?</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<span class="font-bold text-black dark:text-white">Jane Smith:</span>
<p class="text-black dark:text-gray-200">I'm doing great, thanks for asking!</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<span class="font-bold text-black dark:text-white">Mike Brown:</span>
<p class="text-black dark:text-gray-200">Excited for the weekend!</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<span class="font-bold text-black dark:text-white">Emily White:</span>
<p class="text-black dark:text-gray-200">Same here! Any plans?</p>
</div>
</div>
</div>
<div class="mt-4">
<textarea rows="3" class="w-full p-2 border-2 border-black dark:border-gray-600 rounded" placeholder="Type a message..."></textarea>
<button class="mt-2 px-3 py-1 text-sm font-semibold text-white bg-green-600 rounded hover:bg-green-500 focus:outline-none">Send</button>
</div>
</div>Composants associés
Composant de fenêtre de chat avec conception 3D, réactivité et mode sombre
Un composant de fenêtre de chat réactif avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des avatars et des images de repère.
Composant de fenêtre de chat
Un composant de fenêtre de chat complexe et réactif avec une esthétique de conception monospace/développeur, une palette de couleurs automnales, optimisé pour les applications de sport/fitness, y compris la prise en charge du mode sombre et des éléments interactifs.
Composant de fenêtre de chat
Un composant de fenêtre de chat simple, propre et fiable avec une palette de couleurs pastel, adapté aux sites Web d’entreprise ou de voyage/tourisme. Il est entièrement réactif et prend en charge le mode sombre.