Componente della finestra di chat
Un componente della finestra di chat progettato in stile Brutalismo con contrasto elevato, effetti reattivi e supporto per temi scuri.
Codice HTML
<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>Componenti correlati
RetroChatWindow
Un componente per la finestra di chat in stile retrò/vintage che utilizza Tailwind CSS, con design reattivo e supporto per la modalità oscura. Include messaggi segnaposto e avatar. Niente JavaScript.
Componente della finestra di chat
Un componente reattivo della finestra di chat con una combinazione di colori triadica, microinterazioni e supporto per la modalità scura, progettato per l'e-commerce. Presenta un'intestazione della chat, un elenco di messaggi con messaggi mittente/destinatario e un input per i messaggi.
Componente della finestra di chat
Un componente della finestra di chat reattiva con microinterazioni incentrate su animazioni coinvolgenti. Supporta la modalità oscura e utilizza Tailwind CSS per lo stile.