Composant de la section des commentaires
Un composant simple de la section des commentaires conçu avec une esthétique rétro/vintage et des tons de terre. Il présente un design nostalgique rappelant les années 80 et 90, conçu pour les interfaces de médias sociaux, avec prise en charge du mode sombre.
HTML Code
<div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-brown-800 dark:text-brown-200 mb-4">Comments</h2>
<div class="flex mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-4">
<div class="flex-1">
<input type="text" placeholder="Write a comment..." class="w-full bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 p-2 rounded-lg shadow border border-gray-300 dark:border-gray-600 placeholder-gray-600 dark:placeholder-gray-400 focus:ring focus:ring-brown-300 dark:focus:ring-brown-500"/>
</div>
</div>
<div class="border-t border-gray-300 dark:border-gray-600 pt-4">
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-3">
<div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg shadow">
<p class="text-brown-800 dark:text-brown-200"><strong>Alice</strong> <span class="text-gray-600 dark:text-gray-400">- 2 hours ago</span></p>
<p class="text-gray-800 dark:text-gray-300">Love this post! It really brings back memories.</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-3">
<div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg shadow">
<p class="text-brown-800 dark:text-brown-200"><strong>Bob</strong> <span class="text-gray-600 dark:text-gray-400">- 4 hours ago</span></p>
<p class="text-gray-800 dark:text-gray-300">The vintage vibe is amazing!</p>
</div>
</div>
</div>
</div>Composants associés
Brutalism_Rainbow_Medical_Comments_Section
Un composant complexe de section de commentaires d’inspiration brutaliste pour les applications médicales/de santé, doté d’un schéma de couleurs dégradé arc-en-ciel vibrant et d’une réactivité totale avec prise en charge du mode sombre.
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.
Composant de la section des commentaires
Un composant de section de commentaires inspiré du glassmorphisme pour les blogs ou les pages de contenu, avec des éléments translucides givrés ressemblant à du verre, des couleurs vives, une réactivité et une prise en charge du mode sombre.