Composant de la section des commentaires
Un composant de section de commentaires réactif stylisé avec un design glassmorphism, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou et la prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<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>Composants associés
Section des commentaires de Cyberpunk Autumn
Une simple section de commentaires sur le thème du cyberpunk pour un tableau de bord, avec des arrière-plans sombres, des accents de néon et de riches couleurs d’automne. Entièrement réactif avec prise en charge du mode sombre.
Neon_Glow_Comments_Section
Un composant de section de commentaires réactif avec une esthétique néon / lueur vibrante, avec des avatars d’utilisateurs, des horodatages et un bouton de réponse. Prend en charge le mode sombre et est conçu pour les interfaces de médias sociaux.
Composant de la section des commentaires
Un composant de section de commentaires propre et minimaliste avec une palette de couleurs bonbon/doux, conçu pour les plateformes éducatives. Dispose d’une mise en page réactive, d’une prise en charge du mode sombre et met l’accent sur la typographie.