Componente della finestra di chat
Un componente della finestra di chat reattiva con supporto per la modalità oscura utilizzando Tailwind CSS. È dotato di un'intestazione con le informazioni sull'utente, un'area messaggi con i messaggi in entrata e in uscita e un piè di pagina per digitare nuovi messaggi. Le immagini sono segnaposto da picsum.photos e randomuser.me.
Codice HTML
<div class="flex flex-col h-screen bg-gray-900 text-gray-200">
<!-- Header -->
<header class="flex items-center justify-between p-4 bg-gray-800">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<h1 class="text-lg font-semibold">Chat User</h1>
</div>
<!-- Add any header icons here -->
</header>
<!-- Message Area -->
<div class="flex-1 overflow-y-auto p-4">
<!-- Incoming Message -->
<div class="flex items-start mb-4">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Other User Avatar">
<div class="flex flex-col">
<div class="bg-gray-700 text-gray-200 p-3 rounded-lg mb-1">
Hello! How are you?
</div>
<span class="text-xs text-gray-500">10:00 AM</span>
</div>
</div>
<!-- Outgoing Message -->
<div class="flex items-end justify-end mb-4">
<div class="flex flex-col items-end">
<div class="bg-blue-600 text-white p-3 rounded-lg mb-1">
I'm good, thanks! How about you?
</div>
<span class="text-xs text-gray-500">10:05 AM</span>
</div>
<img class="w-8 h-8 rounded-full ml-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</div>
<!-- Add more messages here -->
</div>
<!-- Footer -->
<footer class="flex items-center p-4 bg-gray-800">
<input type="text" class="flex-1 rounded-full px-4 py-2 mr-4 bg-gray-700 text-gray-200 focus:outline-none" placeholder="Type your message...">
<button class="bg-blue-600 text-white rounded-full p-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"/>
</svg>
</button>
</footer>
</div>Componenti correlati
Componente della finestra di chat
Un componente della finestra di chat reattiva con elementi di progettazione 3D e supporto per temi scuri utilizzando Tailwind CSS. Non è richiesto alcun JavaScript.
Componente della finestra di chat
Un componente semplice, reattivo, ispirato al Material Design per la finestra di chat con toni caldi del tramonto, adatto per siti Web aziendali e aziendali, che supporta la modalità oscura.
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.