Componente de la sección de comentarios
Componente de la sección de comentarios con diseño de neumorfismo, combinación de colores triádica y complejidad moderada para redes sociales, implementado mediante CSS de Tailwind con diseño responsivo y soporte de temas oscuros.
Código HTML
<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>
Componentes relacionados
Componente de la sección de comentarios
Componente de sección de comentarios responsivos con skeuomorfismo, combinación de colores pastel, complejidad simple adaptada para el comercio electrónico. Tema oscuro compatible.
Componente de la sección de comentarios
Un componente de sección de comentarios responsivo con diseño de morfismo de vidrio, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y soporte de temas oscuros mediante Tailwind CSS.
Sección de Comentarios
Sección de comentarios Componente con diseño de materiales utilizando el esquema de color Triádico para fines comerciales / corporativos. Diseño responsivo con soporte para temas oscuros.