Industrial_Purple_Comments_Section
Un composant complexe et réactif de la section des commentaires avec une esthétique de design industriel et une palette de couleurs violet/violet, adapté aux blogs ou à la consommation de contenu. Comprend des éléments exposés, une sensation de matière première et une prise en charge du mode sombre.
HTML Code
<section class="font-sans bg-gray-50 dark:bg-gray-950 py-12 px-4 shadow-inner dark:shadow-purple-950 border-t border-purple-200 dark:border-purple-800">
<div class="max-w-4xl mx-auto rounded-lg overflow-hidden bg-white dark:bg-gray-900 border-2 border-purple-300 dark:border-purple-700 shadow-xl dark:shadow-2xl dark:shadow-purple-900/50 relative">
<!-- Top exposed 'metal' plate effect -->
<div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-b from-purple-200/50 dark:from-purple-900/50 to-transparent dark:to-transparent border-b border-purple-300 dark:border-purple-800 -z-0 pointer-events-none"></div>
<div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-purple-200/50 dark:from-purple-900/50 to-transparent dark:to-transparent border-t border-purple-300 dark:border-purple-800 -z-0 pointer-events-none"></div>
<div class="p-6 sm:p-8 relative z-10">
<h2 class="text-3xl font-bold text-gray-800 dark:text-purple-300 mb-6 border-b-2 border-purple-400 dark:border-purple-600 pb-3 flex items-center justify-between">
Comments
<span class="text-sm text-gray-600 dark:text-purple-400 font-normal"> (5)</span>
</h2>
<!-- New Comment Section -->
<div class="mb-10 p-5 bg-gray-100 dark:bg-gray-800 rounded-lg border border-purple-200 dark:border-purple-700 shadow-inner dark:shadow-purple-900/30">
<h3 class="text-xl font-semibold text-gray-700 dark:text-purple-400 mb-4">Leave a Comment</h3>
<textarea
class="w-full p-4 mb-4 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 rounded-md border border-purple-300 dark:border-purple-600 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-all duration-300 shadow-sm dark:shadow-purple-900/20 resize-y"
rows="4"
placeholder="Share your thoughts..."
></textarea>
<div class="flex flex-col sm:flex-row gap-4 mb-4">
<input
type="text"
class="flex-1 p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 rounded-md border border-purple-300 dark:border-purple-600 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-all duration-300 shadow-sm dark:shadow-purple-900/20"
placeholder="Your Name"
/>
<input
type="email"
class="flex-1 p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 rounded-md border border-purple-300 dark:border-purple-600 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-all duration-300 shadow-sm dark:shadow-purple-900/20"
placeholder="Your Email (private)"
/>
</div>
<button class="w-full sm:w-auto px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-md shadow-lg dark:shadow-purple-800/50 transform hover:-translate-y-0.5 transition-all duration-300 border-b-2 border-purple-800 dark:border-purple-950 inline-flex items-center justify-center">
Post Comment
<svg class="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
</div>
<!-- Comments List -->
<div class="space-y-8">
<!-- Comment 1 -->
<div class="flex flex-col sm:flex-row p-6 bg-gray-50 dark:bg-gray-850 rounded-lg shadow-md dark:shadow-purple-900/30 border border-purple-200 dark:border-purple-700">
<div class="flex-shrink-0 mr-0 sm:mr-4 mb-4 sm:mb-0 flex justify-center">
<img class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-purple-600 object-cover shadow-md" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
</div>
<div class="flex-grow">
<div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-2">
<h4 class="font-bold text-lg text-gray-800 dark:text-purple-300">John Doe</h4>
<span class="text-sm text-gray-500 dark:text-purple-400">2 hours ago</span>
</div>
<p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-4">
This article provided some fascinating insights into the topic. The industrial aesthetics for the comments section truly set a unique tone!
</p>
<div class="flex gap-4">
<button class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.186-.828m9.54-4.067A9 9 0 0012 4.091V12h8z"></path></svg>
Reply
</button>
<button class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>
Upvote (3)
</button>
</div>
</div>
</div>
<!-- Comment 2 (Reply) -->
<div class="ml-0 sm:ml-16 flex flex-col sm:flex-row p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-inner dark:shadow-purple-950/30 border border-purple-200 dark:border-purple-700 relative">
<div class="absolute top-0 left-0 w-full h-full border-l-4 border-purple-400 dark:border-purple-600 rounded-l-lg transform -translate-x-2 sm:-translate-x-1 sm:translate-y-0.5 pointer-events-none"></div>
<div class="flex-shrink-0 mr-0 sm:mr-4 mb-4 sm:mb-0 flex justify-center z-10">
<img class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-purple-600 object-cover shadow-md" src="https://randomuser.me/api/portraits/women/24.jpg" alt="Avatar">
</div>
<div class="flex-grow z-10">
<div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-2">
<h4 class="font-bold text-lg text-gray-800 dark:text-purple-300">Jane Smith</h4>
<span class="text-sm text-gray-500 dark:text-purple-400">1 hour ago</span>
</div>
<p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-4">
@John Doe, I totally agree! The design choice adds an interesting layer to the user experience. Very well implemented.
</p>
<button class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.186-.828m9.54-4.067A9 9 0 0012 4.091V12h8z"></path></svg>
Reply
</button>
</div>
</div>
<!-- Comment 3 -->
<div class="flex flex-col sm:flex-row p-6 bg-gray-50 dark:bg-gray-850 rounded-lg shadow-md dark:shadow-purple-900/30 border border-purple-200 dark:border-purple-700">
<div class="flex-shrink-0 mr-0 sm:mr-4 mb-4 sm:mb-0 flex justify-center">
<img class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-purple-600 object-cover shadow-md" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
<div class="flex-grow">
<div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-2">
<h4 class="font-bold text-lg text-gray-800 dark:text-purple-300">Alex P.</h4>
<span class="text-sm text-gray-500 dark:text-purple-400">5 hours ago</span>
</div>
<p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-4">
Great job explaining the complex concepts. I found the examples particularly helpful for understanding the nuances.
Keep up the excellent work!
</p>
<div class="flex gap-4">
<button class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.186-.828m9.54-4.067A9 9 0 0012 4.091V12h8z"></path></svg>
Reply
</button>
<button class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>
Upvote (7)
</button>
</div>
</div>
</div>
</div>
<!-- Load More Button -->
<div class="mt-10 pt-6 border-t-2 border-purple-400 dark:border-purple-600 text-center">
<button class="inline-flex items-center px-8 py-4 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-purple-200 font-semibold rounded-md shadow-md dark:shadow-purple-950/40 transform hover:-translate-y-1 transition-all duration-300 border-b-2 border-gray-400 dark:border-purple-800">
Load More Comments
<svg class="ml-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
</div>
</div>
</div>
</section>Composants associés
Composant de la section des commentaires
Un composant simple, épuré et minimaliste de la section des commentaires avec une palette de couleurs rétro/vintage, conçu pour la documentation ou les sites wiki. Il est entièrement réactif et prend en charge le mode sombre.
Composant de la section des commentaires
Composant pour la section des commentaires avec la conception Skeuomorphism, la palette de couleurs triadique, les interactions complexes, l’objectif des médias sociaux, la prise en charge des thèmes réactifs et sombres.
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.