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
Composant de section de commentaires avec une palette de couleurs monochromatiques, des micro-interactions et un design réactif avec prise en charge du thème sombre.
Composant de la section des commentaires avec style neumorphisme
Composant avec conception Neumorphism, effets réactifs et prise en charge du thème sombre. Aucun code JavaScript n’est inclus.
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.