Composant de la section des commentaires
Une section de commentaires réactive avec le style de conception Neumorphism, les couleurs Earth tone et la prise en charge du thème sombre pour le contenu du blog.
HTML Code
<div class="max-w-3xl mx-auto my-10 p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-inner">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Comments</h2>
<div class="mb-6">
<textarea class="w-full h-24 bg-gray-300 dark:bg-gray-700 border border-gray-400 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400" placeholder="Add a comment..."></textarea>
</div>
<button class="py-2 px-4 bg-green-500 dark:bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-600 dark:hover:bg-green-700 transition duration-300">Post Comment</button>
<div class="mt-10">
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">This is a sample comment content. I really enjoyed reading this article!</p>
<span class="text-sm text-gray-500 dark:text-gray-300">2 hours ago</span>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Jane Doe</h3>
<p class="text-gray-600 dark:text-gray-400">Thanks for sharing this amazing content!</p>
<span class="text-sm text-gray-500 dark:text-gray-300">3 hours ago</span>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Alex Smith</h3>
<p class="text-gray-600 dark:text-gray-400">Very insightful! I learned a lot.</p>
<span class="text-sm text-gray-500 dark:text-gray-300">5 hours ago</span>
</div>
</div>
</div>
</div>Composants associés
Composant de la section des commentaires
Composant avec conception Neumorphism, schéma de couleurs triadique et complexité modérée pour les médias sociaux, mis en œuvre à l’aide de Tailwind CSS avec un design réactif et une prise en charge du thème sombre.
Composant de la section des commentaires
Un composant complexe et réactif de la section des commentaires conçu pour les systèmes de réservation, avec une palette de couleurs noir et blanc inspirée du Bauhaus et une couleur d’accent vive. Comprend les avatars des utilisateurs, le nombre d’étoiles, les horodatages et la prise en charge du mode sombre.
Neumorphic_Neon_Comments_Section
Un composant de section de commentaires neumorphe avec une palette de couleurs néon/électrique, conçu pour les plateformes de divertissement/médias. Dispose d’une mise en page réactive, d’une prise en charge du mode sombre et d’éléments interactifs. Chaque commentaire affiche un avatar, un nom d’utilisateur, un horodatage et un texte de commentaire, avec des boutons J’aime et Réponse.