Componente Sezione Commenti
Un semplice componente della sezione commenti progettato con lo stile Material Design, utilizzando una combinazione di colori monocromatica, ottimizzata per le interfacce dei social media e un design reattivo con supporto per temi scuri.
Codice HTML
<div class="max-w-2xl mx-auto p-4 dark:bg-gray-800 bg-white rounded-lg shadow-md">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
<div class="mt-4 space-y-4">
<!-- Comment 1 -->
<div class="flex items-start space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">This is a comment. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="text-gray-500 dark:text-gray-500 text-sm">2 hours ago</span>
</div>
</div>
<!-- Comment 2 -->
<div class="flex items-start space-x-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Another comment! Vivamus sit amet nulla nec urna maximus suscipit.</p>
<span class="text-gray-500 dark:text-gray-500 text-sm">3 hours ago</span>
</div>
</div>
<!-- Comment 3 -->
<div class="flex items-start space-x-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">Alice Brown</p>
<p class="text-gray-600 dark:text-gray-400">This is another comment. Donec eget tristique eros, ac auctor orci.</p>
<span class="text-gray-500 dark:text-gray-500 text-sm">5 hours ago</span>
</div>
</div>
</div>
<div class="mt-6">
<textarea placeholder="Add a comment..." class="w-full dark:bg-gray-700 bg-gray-100 border border-gray-300 dark:border-gray-600 rounded-md p-2" rows="3"></textarea>
<button class="mt-2 w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-md">Post Comment</button>
</div>
</div>Componenti correlati
Brutalism_Rainbow_Medical_Comments_Section
Un componente complesso della sezione commenti di ispirazione brutalista per applicazioni mediche/sanitarie, caratterizzato da una vivace combinazione di colori sfumati arcobaleno e piena reattività con supporto della modalità oscura.
Neon_Glow_Comments_Section
Un componente della sezione commenti reattivo con un'estetica al neon/bagliore vibrante, con avatar utente, timestamp e un pulsante di risposta. Supporta la modalità oscura ed è progettato per le interfacce dei social media.
Componente Sezione Commenti
Componente per la sezione commenti con design Skeuomorphism, combinazione di colori triadici, interazioni complesse, scopo dei social media, supporto per temi reattivi e scuri.