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
Un composant de fenêtre de chat réactif avec des micro-interactions axées sur des animations attrayantes. Il prend en charge le mode sombre et utilise Tailwind CSS pour le coiffage.
Composant de fenêtre de chat
Un composant de fenêtre de chat simple conçu avec des éléments 3D, une palette de couleurs de tons de terre et une prise en charge réactive du thème sombre.
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.