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.
HTML Code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comments Section</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
.neumorphism {
box-shadow: 5px 5px 10px #cbced1, -5px -5px 10px #ffffff;
}
.dark .neumorphism {
box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #333333;
}
.neumorphism-inset {
box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
}
.dark .neumorphism-inset {
box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #333333;
}
</style>
</head>
<body class="bg-gray-200 dark:bg-gray-800 transition duration-300">
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-700 rounded-lg p-6 neumorphism transition duration-300">
<h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-white">Comments</h2>
<!-- Comment Input -->
<div class="mb-6">
<textarea class="w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white neumorphism-inset focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 transition duration-300" rows="4" placeholder="Add a comment..."></textarea>
<button class="mt-3 w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 neumorphism transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Post Comment</button>
</div>
<!-- Comment List -->
<div class="space-y-4">
<!-- Single Comment -->
<div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg neumorphism transition duration-300">
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex justify-between items-center">
<span class="font-semibold text-gray-800 dark:text-white">Sarah Johnson</span>
<span class="text-sm text-gray-500 dark:text-gray-300">2 hours ago</span>
</div>
<p class="text-gray-700 dark:text-gray-200 mt-1">This is a great post! Very informative.</p>
<div class="flex space-x-4 mt-3">
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
</div>
</div>
</div>
</div>
<!-- Single Comment -->
<div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg neumorphism transition duration-300">
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/men/76.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex justify-between items-center">
<span class="font-semibold text-gray-800 dark:text-white">David Miller</span>
<span class="text-sm text-gray-500 dark:text-gray-300">1 hour ago</span>
</div>
<p class="text-gray-700 dark:text-gray-200 mt-1">I agree! Looking forward to more content like this.</p>
<div class="flex space-x-4 mt-3">
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
</div>
</div>
</div>
</div>
<!-- Reply Example -->
<div class="ml-14 bg-gray-200 dark:bg-gray-700 p-4 rounded-lg neumorphism transition duration-300">
<div class="flex items-start space-x-4">
<img class="w-8 h-8 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex justify-between items-center">
<span class="font-semibold text-gray-800 dark:text-white">Emily Clark</span>
<span class="text-sm text-gray-500 dark:text-gray-300">45 minutes ago</span>
</div>
<p class="text-gray-700 dark:text-gray-200 mt-1">Thanks David! Glad you liked it.</p>
<div class="flex space-x-4 mt-3">
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
<button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Composants associés
Composant de la section des commentaires
Une section de commentaires conçue avec skeuomorphism, avec des tons de terre et un support de thème sombre, adaptée aux sites de commerce électronique.
CyberpunkCommentairesSection
Un composant simple et réactif de la section des commentaires avec une esthétique cyberpunk et futuriste et un dégradé de couleurs arc-en-ciel, adapté aux sites Web de voyage / tourisme. Inclut la prise en charge du mode sombre.
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.