Componente della finestra di chat
Un semplice componente della finestra di chat progettato in stile Material Design con un tema scuro e un layout reattivo adatto alle interfacce dei social media.
Codice HTML
<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>Componenti correlati
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.
Componente della finestra di chat
Un componente minimalista per la finestra di chat per i siti di e-commerce, caratterizzato da una combinazione di colori in scala di grigi, complessità moderata e reattività con supporto della modalità oscura. Costruito con HTML e Tailwind CSS.
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.