Composant de la section des commentaires
Un composant de section de commentaires propre, inspiré du code, avec des polices monospace et des couleurs pastel, conçu pour les plateformes de divertissement/médias. Dispose d’une réactivité et d’une prise en charge du mode sombre.
HTML Code
<section class="font-mono bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-8 md:py-12 lg:py-16">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
<h2 class="text-3xl md:text-4xl font-bold mb-8 text-center text-gray-900 dark:text-gray-100 uppercase tracking-widest">
<span class="block">// Comments</span>
</h2>
<!-- New Comment Input -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-8 border border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-300">Leave a Comment <span class="text-purple-400">></span></h3>
<textarea class="w-full p-3 mb-4 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 text-sm md:text-base resize-y min-h-[80px]"
placeholder="Type your comment here..."></textarea>
<div class="flex justify-end">
<button class="px-6 py-2 bg-purple-400 text-white rounded-md hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm md:text-base font-semibold uppercase tracking-wider">
Submit <span class="hidden sm:inline">//</span>
</button>
</div>
</div>
<!-- Comments List -->
<div class="space-y-6">
<!-- Comment 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-start mb-4">
<img class="w-10 h-10 rounded-full mr-4 border-2 border-green-300 dark:border-green-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div>
<p class="text-sm md:text-base font-semibold text-gray-700 dark:text-gray-300">@<span class="text-blue-400">john_doe</span></p>
<p class="text-xs text-gray-500 dark:text-gray-400">2 days ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed mb-4">
This episode was absolutely mind-blowing! The plot twists kept me on the edge of my seat. Can't wait for the next one.
<span class="text-green-400">// Kudos to the production team!</span>
</p>
<div class="flex items-center text-sm">
<button class="flex items-center text-pink-400 hover:text-pink-500 mr-4 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.614.937-.991 1.637-.991s1.336.377 1.637.991l1.792 3.633 4.021.583c.677.098 1.096.86.64 1.411l-2.91 2.839.687 4.004c.117.68-.592 1.205-1.226.877L10 16.273l-3.593 1.89c-.634.328-1.343-.197-1.226-.877l.687-4.004-2.91-2.839c-.456-.551-.037-1.313.64-1.411l4.02-.583L9.049 2.927z"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">123 <span class="hidden sm:inline">Likes</span></span>
</button>
<button class="flex items-center text-yellow-400 hover:text-yellow-500 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 102 0v-2a9 9 0 00-9-9H5.414l2.293-2.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414-1.414L5.414 11H11a5 5 0 005-5V4a1 1 0 10-2 0v2a3 3 0 01-3 3H7.707a1 1 0 000 1.414z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">45 <span class="hidden sm:inline">Replies</span></span>
</button>
</div>
</div>
<!-- Comment 2 (with a reply) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-start mb-4">
<img class="w-10 h-10 rounded-full mr-4 border-2 border-orange-300 dark:border-orange-400" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
<div>
<p class="text-sm md:text-base font-semibold text-gray-700 dark:text-gray-300">@<span class="text-purple-400">coder_girl</span></p>
<p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed mb-4">
I loved the attention to detail in the set design! It really adds to the immersion.
<span class="text-red-400">// Amazing work backend-devs!</span>
</p>
<div class="flex items-center text-sm mb-4">
<button class="flex items-center text-pink-400 hover:text-pink-500 mr-4 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.614.937-.991 1.637-.991s1.336.377 1.637.991l1.792 3.633 4.021.583c.677.098 1.096.86.64 1.411l-2.91 2.839.687 4.004c.117.68-.592 1.205-1.226.877L10 16.273l-3.593 1.89c-.634.328-1.343-.197-1.226-.877l.687-4.004-2.91-2.839c-.456-.551-.037-1.313.64-1.411l4.02-.583L9.049 2.927z"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">88 <span class="hidden sm:inline">Likes</span></span>
</button>
<button class="flex items-center text-yellow-400 hover:text-yellow-500 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 102 0v-2a9 9 0 00-9-9H5.414l2.293-2.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414-1.414L5.414 11H11a5 5 0 005-5V4a1 1 0 10-2 0v2a3 3 0 01-3 3H7.707a1 1 0 000 1.414z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">12 <span class="hidden sm:inline">Replies</span></span>
</button>
</div>
<!-- Reply -->
<div class="ml-8 pt-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-start mb-4">
<img class="w-8 h-8 rounded-full mr-3 border border-blue-300 dark:border-blue-400" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Reply User Avatar">
<div>
<p class="text-xs md:text-sm font-semibold text-gray-700 dark:text-gray-300">@<span class="text-blue-400">_dev_ops_</span></p>
<p class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed">
Agreed! The world-building was top-notch.
<span class="text-blue-400">// immersive experience</span>
</p>
</div>
</div>
<!-- Comment 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-start mb-4">
<img class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-400" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
<div>
<p class="text-sm md:text-base font-semibold text-gray-700 dark:text-gray-300">@<span class="text-green-400">film_buff_89</span></p>
<p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed mb-4">
The soundtrack was incredible. Definitely adding it to my playlist. Anyone else feel the same?
<span class="text-yellow-400">// bangers only</span>
</p>
<div class="flex items-center text-sm">
<button class="flex items-center text-pink-400 hover:text-pink-500 mr-4 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.614.937-.991 1.637-.991s1.336.377 1.637.991l1.792 3.633 4.021.583c.677.098 1.096.86.64 1.411l-2.91 2.839.687 4.004c.117.68-.592 1.205-1.226.877L10 16.273l-3.593 1.89c-.634.328-1.343-.197-1.226-.877l.687-4.004-2.91-2.839c-.456-.551-.037-1.313.64-1.411l4.02-.583L9.049 2.927z"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">56 <span class="hidden sm:inline">Likes</span></span>
</button>
<button class="flex items-center text-yellow-400 hover:text-yellow-500 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 102 0v-2a9 9 0 00-9-9H5.414l2.293-2.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414-1.414L5.414 11H11a5 5 0 005-5V4a1 1 0 10-2 0v2a3 3 0 01-3 3H7.707a1 1 0 000 1.414z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">7 <span class="hidden sm:inline">Replies</span></span>
</button>
</div>
</div>
</div>
</div>
</section>Composants associés
Composant de la section des commentaires
Un composant complexe et attrayant de section de commentaires inspiré de la 3D pour les sites Web d’alimentation/restaurant, avec des neutres froids, une réactivité totale et une prise en charge du mode sombre.
Composant de la section des commentaires
Composant de section de commentaires réactifs avec skeuomorphisme, palette de couleurs pastel, complexité simple adaptée au commerce électronique. Thème sombre pris en charge.
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.