Componente Sezione Commenti
Un componente reattivo della sezione commenti con design glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6 max-w-lg mx-auto mt-8 dark:bg-gray-800 dark:bg-opacity-30">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
<div class="mt-4">
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<div class="flex justify-between items-center">
<h3 class="text-md font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
<p class="mt-1 text-gray-600 dark:text-gray-300">This is an amazing post! Thanks for sharing!</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<div class="flex justify-between items-center">
<h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">4 hours ago</span>
</div>
<p class="mt-1 text-gray-600 dark:text-gray-300">I really enjoyed reading this. Great insights!</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<div class="flex justify-between items-center">
<h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Michael Brown</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
</div>
<p class="mt-1 text-gray-600 dark:text-gray-300">Very well written! I appreciate the effort.</p>
</div>
</div>
</div>
<form class="mt-6">
<textarea class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white" rows="3" placeholder="Add a comment..."></textarea>
<button type="submit" class="mt-2 bg-blue-500 hover:bg-blue-600 rounded-lg text-white py-2 px-4">Submit</button>
</form>
</div>Componenti correlati
Componente Sezione Commenti
Un componente reattivo della sezione commenti progettato per siti Web aziendali/aziendali, con animazioni accattivanti, colori vivaci e supporto per la modalità scura.
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.
Componente della sezione Commenti con stile di neumorfismo
Componente della sezione commenti con design del neumorfismo, effetti reattivi e supporto per temi scuri. Non è incluso alcun codice JavaScript.