Компонент раздела комментариев
Компонент раздела комментариев с дизайном Neumorphism, цветовой схемой Triadic и умеренной сложностью для социальных сетей, реализованный с использованием Tailwind CSS с адаптивным дизайном и поддержкой темных тем.
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>
Связанные компоненты
Компонент раздела комментариев
Минималистичный компонент раздела комментариев, разработанный с помощью Tailwind CSS, с четкими линиями, отзывчивыми эффектами и поддержкой темного режима. Он включает в себя аватары пользователей, текст комментариев, временные метки и простую область ввода для новых комментариев.
КомментарииРаздел
Адаптивный, совместимый с темной темой компонент раздела комментариев для электронной коммерции с минималистичным/плоским дизайном, триадической цветовой схемой и сложными элементами взаимодействия, созданный с помощью Tailwind CSS. Использует picsum.photos и randomuser.me для демонстрационных изображений.
Компонент раздела комментариев
Простой компонент раздела комментариев, выполненный в ретро/винтажной эстетике и земляных тонах. Он отличается ностальгическим дизайном, напоминающим 80-е и 90-е годы, адаптированным под интерфейсы социальных сетей, с поддержкой темного режима.