Composant de la section des commentaires
Un composant simple de section de commentaires conçu avec le style Material Design, utilisant une palette de couleurs monochromatique, optimisé pour les interfaces de médias sociaux et un design réactif avec prise en charge du thème sombre.
HTML Code
<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>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.
Composant de la section des commentaires
Composant de la section des commentaires avec micro-interactions, palette de couleurs pastel, complexité modérée pour le tableau de bord, réactif avec prise en charge du thème sombre, utilisation de Tailwind CSS. Images de picsum.photos pour les images et randomuser.me pour les avatars. Pas de JavaScript.
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.