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.
HTML Code
<div
class="container mx-auto p-4 dark:bg-gray-900 dark:text-white"
>
<h2 class="text-2xl font-bold mb-4 dark:text-white">Comments</h2>
<div class="mb-4">
<textarea
class="w-full p-2 border border-gray-300 rounded shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
rows="4"
placeholder="Add a comment..."
></textarea>
<button
class="mt-2 px-4 py-2 bg-blue-500 text-white rounded shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800"
>
Post Comment
</button>
</div>
<div class="space-y-4">
<div
class="bg-white p-4 rounded shadow-lg dark:bg-gray-800 dark:text-white"
>
<div class="flex items-center mb-2">
<img
class="w-10 h-10 rounded-full mr-4 shadow-md"
src="https://randomuser.me/api/portraits/men/32.jpg"
alt="User Avatar"
/>
<div>
<h4 class="font-bold dark:text-white">John Doe</h4>
<p class="text-gray-500 text-sm dark:text-gray-400">2 hours ago</p>
</div>
</div>
<p class="dark:text-white">
This is a great comment! It provides valuable insights.
</p>
<div class="flex items-center mt-4 space-x-4">
<button
class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 mr-1"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 13v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h3.586l1.414 1.414a.996.996 0 001.414 0L10.414 11H14a2 2 0 012 2h2zM5 9.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
clip-rule="evenodd"
></path>
</svg>
Like
</button>
<button
class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 mr-1"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5z"
clip-rule="evenodd"
></path>
</svg>
Reply
</button>
</div>
</div>
<div
class="bg-white p-4 rounded shadow-lg dark:bg-gray-800 dark:text-white"
>
<div class="flex items-center mb-2">
<img
class="w-10 h-10 rounded-full mr-4 shadow-md"
src="https://randomuser.me/api/portraits/women/44.jpg"
alt="User Avatar"
/>
<div>
<h4 class="font-bold dark:text-white">Jane Smith</h4>
<p class="text-gray-500 text-sm dark:text-gray-400">1 hour ago</p>
</div>
</div>
<p class="dark:text-white">
I agree with the previous comment. This is very helpful.
</p>
<div class="flex items-center mt-4 space-x-4">
<button
class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 mr-1"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 13v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h3.586l1.414 1.414a.996.996 0 001.414 0L10.414 11H14a2 2 0 012 2h2zM5 9.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
clip-rule="evenodd"
></path>
</svg>
Like
</button>
<button
class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 mr-1"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5z"
clip-rule="evenodd"
></path>
</svg>
Reply
</button>
</div>
</div>
</div>
</div>
Composants associés
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.
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
Une section de commentaires réactive conçue pour les plateformes de commerce électronique avec une interface utilisateur en mode sombre et une palette de couleurs triadique.