Поиск компонентов

Категории

Компоненты Раздел комментариев

Раздел комментариев

Область, где пользователи могут оставлять комментарии

КомментарииРаздел

Адаптивный, совместимый с темной темой компонент раздела комментариев для электронной коммерции с минималистичным/плоским дизайном, триадической цветовой схемой и сложными элементами взаимодействия, созданный с помощью Tailwind CSS. Использует picsum.photos и randomuser.me для демонстрационных изображений.

Открытый Предварительный просмотр

                <div class="container mx-auto p-4 dark:bg-gray-900 dark:text-white">
  <h2 class="text-2xl font-bold mb-6">Customer Reviews</h2>

  </div>

Компонент раздела комментариев

Компонент раздела комментариев с дизайном Neumorphism, цветовой схемой Triadic и умеренной сложностью для социальных сетей, реализованный с использованием Tailwind CSS с адаптивным дизайном и поддержкой темных тем.

Открытый Предварительный просмотр

                
<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>

Компонент раздела комментариев

Раздел комментариев разработан со скевоморфизмом, с поддержкой земляных тонов и темных тем, адаптированный для веб-сайтов электронной коммерции.

Открытый Предварительный просмотр

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Customer Comments</h2>
    <div class="space-y-4">
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
            <div class="ml-3">
                <p class="text-brown-800 dark:text-brown-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">This product exceeded my expectations! Highly recommend.</p>
                <div class="mt-2">
                    <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
            <div class="ml-3">
                <p class="text-brown-800 dark:text-brown-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">The quality is fantastic! Will buy again.</p>
                <div class="mt-2">
                    <span class="text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
            <div class="ml-3">
                <p class="text-brown-800 dark:text-brown-200 font-medium">Mike Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">Fast shipping and great customer service!</p>
                <div class="mt-2">
                    <span class="text-sm text-gray-500 dark:text-gray-400">3 days ago</span>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Leave a Comment:</h3>
        <textarea class="w-full p-2 border rounded-lg bg-gray-100 dark:bg-gray-700 border-brown-300 dark:border-brown-600 focus:outline-none focus:ring focus:ring-brown-500 dark:focus:ring-brown-400" rows="4" placeholder="Write your thoughts..."></textarea>
        <button class="mt-2 px-4 py-2 bg-brown-600 text-white rounded-lg hover:bg-brown-500 focus:outline-none focus:ring focus:ring-brown-500 dark:bg-brown-500 dark:hover:bg-brown-400 dark:focus:ring-brown-400">Submit</button>
    </div>
</div>

Компонент раздела комментариев

Простой компонент раздела комментариев, выполненный в ретро/винтажной эстетике и земляных тонах. Он отличается ностальгическим дизайном, напоминающим 80-е и 90-е годы, адаптированным под интерфейсы социальных сетей, с поддержкой темного режима.

Открытый Предварительный просмотр

                <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-brown-800 dark:text-brown-200 mb-4">Comments</h2>
    <div class="flex mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-4">
        <div class="flex-1">
            <input type="text" placeholder="Write a comment..." class="w-full bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 p-2 rounded-lg shadow border border-gray-300 dark:border-gray-600 placeholder-gray-600 dark:placeholder-gray-400 focus:ring focus:ring-brown-300 dark:focus:ring-brown-500"/>
        </div>
    </div>
    <div class="border-t border-gray-300 dark:border-gray-600 pt-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-3">
            <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg shadow">
                <p class="text-brown-800 dark:text-brown-200"><strong>Alice</strong>  <span class="text-gray-600 dark:text-gray-400">- 2 hours ago</span></p>
                <p class="text-gray-800 dark:text-gray-300">Love this post! It really brings back memories.</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-3">
            <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg shadow">
                <p class="text-brown-800 dark:text-brown-200"><strong>Bob</strong>  <span class="text-gray-600 dark:text-gray-400">- 4 hours ago</span></p>
                <p class="text-gray-800 dark:text-gray-300">The vintage vibe is amazing!</p>
            </div>
        </div>
    </div>
</div>

Компонент раздела комментариев

Адаптивный компонент раздела комментариев со скевоморфизмом, пастельной цветовой гаммой, простой сложностью, адаптированный для электронной коммерции. Поддерживается темная тема.

Открытый Предварительный просмотр

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Comments</h2>

  <!-- Comment 1 -->
  <div class="mb-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-inner">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
        <p class="text-sm text-gray-500">2 days ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">This is a great product! Highly recommend.</p>
  </div>

  <!-- Comment 2 -->
  <div class="mb-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-inner">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
        <p class="text-sm text-gray-500">1 day ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">Fast shipping and excellent quality.</p>
  </div>

  <!-- Add new comment form -->
  <div class="mt-6">
    <textarea class="w-full p-3 rounded-lg border-gray-300 dark:border-gray-600 border-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-200" rows="3" placeholder="Add a comment..."></textarea>
    <button class="mt-3 px-6 py-2 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Submit Comment</button>
  </div>

</div>

Компонент раздела комментариев

Простой компонент раздела комментариев, разработанный в стиле Material Design, с использованием монохроматической цветовой схемы, оптимизированной для интерфейсов социальных сетей и адаптивного дизайна с поддержкой темных тем.

Открытый Предварительный просмотр

                <div class="max-w-2xl mx-auto p-4 dark:bg-gray-800 bg-white rounded-lg shadow-md">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
    <div class="mt-4 space-y-4">
        <!-- Comment 1 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">This is a comment. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">2 hours ago</span>
            </div>
        </div>
        <!-- Comment 2 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Another comment! Vivamus sit amet nulla nec urna maximus suscipit.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">3 hours ago</span>
            </div>
        </div>
        <!-- Comment 3 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Alice Brown</p>
                <p class="text-gray-600 dark:text-gray-400">This is another comment. Donec eget tristique eros, ac auctor orci.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">5 hours ago</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <textarea placeholder="Add a comment..." class="w-full dark:bg-gray-700 bg-gray-100 border border-gray-300 dark:border-gray-600 rounded-md p-2" rows="3"></textarea>
        <button class="mt-2 w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-md">Post Comment</button>
    </div>
</div>

Компонент раздела комментариев

Компонент раздела комментариев, выполненный в бруталистском стиле с пастельными тонами, подходящий для сайтов электронной коммерции, с аватарами пользователей, комментариями и умеренным уровнем интерактивности. Дизайн поддерживает темный режим.

Открытый Предварительный просмотр

                <div class="max-w-4xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Comments Section</h2>
    <div class="border-t border-gray-300 dark:border-gray-600"></div>
    <div class="mt-6">
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">This product is amazing! Highly recommend it.</p>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">3 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">I had a good experience with this purchase.</p>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">5 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Tom Brown</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Could be better; I faced some issues.</p>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">1 day ago</p>
            </div>
        </div>
    </div>
    <div class="border-t border-gray-300 dark:border-gray-600 mt-4 pt-4">
        <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-3">Leave a Comment:</h3>
        <textarea class="w-full h-24 p-2 border border-gray-400 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-200 dark:focus:ring-green-700" placeholder="Write your comment here..."></textarea>
        <button class="mt-2 px-4 py-2 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-md dark:bg-green-600 dark:hover:bg-green-700">Submit</button>
    </div>
</div>

Компонент раздела комментариев

Адаптивный раздел комментариев со стилем дизайна «Неоморфизм», цветами тона земли и поддержкой темной темы для содержимого блога.

Открытый Предварительный просмотр

                <div class="max-w-3xl mx-auto my-10 p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-inner">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Comments</h2>
    <div class="mb-6">
        <textarea class="w-full h-24 bg-gray-300 dark:bg-gray-700 border border-gray-400 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400" placeholder="Add a comment..."></textarea>
    </div>
    <button class="py-2 px-4 bg-green-500 dark:bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-600 dark:hover:bg-green-700 transition duration-300">Post Comment</button>

    <div class="mt-10">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
            <div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
                <h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-400">This is a sample comment content. I really enjoyed reading this article!</p>
                <span class="text-sm text-gray-500 dark:text-gray-300">2 hours ago</span>
            </div>
        </div>

        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
            <div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
                <h3 class="font-semibold text-gray-800 dark:text-gray-200">Jane Doe</h3>
                <p class="text-gray-600 dark:text-gray-400">Thanks for sharing this amazing content!</p>
                <span class="text-sm text-gray-500 dark:text-gray-300">3 hours ago</span>
            </div>
        </div>

        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
            <div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
                <h3 class="font-semibold text-gray-800 dark:text-gray-200">Alex Smith</h3>
                <p class="text-gray-600 dark:text-gray-400">Very insightful! I learned a lot.</p>
                <span class="text-sm text-gray-500 dark:text-gray-300">5 hours ago</span>
            </div>
        </div>
    </div>
</div>