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

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

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

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

HTML-код

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

Связанные компоненты

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

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

Открытый