Компоненты Функциональные компоненты Компонент Функциональные компоненты - Пользовательский интерфейс темного режима

Компонент Функциональные компоненты - Пользовательский интерфейс темного режима

Отзывчивый компонент социальных сетей, разработанный в темном режиме и земляных тонах, подходит для интерфейсов социальных сетей. Включает аватары пользователей, контент постов и кнопки взаимодействия.

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

HTML-код

<div class="bg-gray-800 text-white p-4 rounded-lg shadow-md max-w-lg mx-auto dark:bg-gray-900">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="ml-3">
            <h2 class="text-lg font-semibold">John Doe</h2>
            <p class="text-gray-400">@john_doe</p>
        </div>
    </div>
    <div class="mb-4">
        <p class="text-gray-300">Just had a great day exploring the mountains! 🌄</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/600/300?random=1" alt="Nature Image">
    </div>
    <div class="flex justify-between text-gray-400">
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Like</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Comment</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Share</span>
        </button>
    </div>
</div>

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

Карта бронирования с печатью

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

Открытый

Компонент Функциональные компоненты

Сложный, отзывчивый компонент панели управления с эстетикой моноширинности/разработчика, с использованием крутых нейтральных тонов. Особенности элементов визуализации данных, терминоподобных секций и поддержка темного режима.

Открытый

Компонент Функциональные компоненты

Минималистичный компонент портфолио, разработанный с помощью Tailwind CSS, с яркой цветовой схемой и поддержкой темного режима. Этот компонент предназначен для демонстрации работ или товаров и включает в себя изображения и заполнители аватаров.

Открытый