Компоненты Упоминания пользователей Компонент упоминаний пользователя

Компонент упоминаний пользователя

Скевоморфный пользователь упоминает компонент, предназначенный для имитации реальных элементов, с отзывчивыми эффектами и поддержкой темной темы с использованием Tailwind CSS.

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

HTML-код

<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 max-w-xl mx-auto mt-10">
    <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-4">Mentions</h2>
    <div class="flex flex-col gap-3">
        <div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
            <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div class="ml-4">
                <p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">@john_doe</p>
            </div>
        </div>
        <div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
            <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div class="ml-4">
                <p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">@jane_smith</p>
            </div>
        </div>
        <div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
            <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar">
            <div class="ml-4">
                <p class="font-medium text-gray-800 dark:text-gray-200">Michael Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">@michael_j</p>
            </div>
        </div>
    </div>
</div>

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

Компонент упоминаний пользователя

Адаптивный компонент User Mentions с поддержкой темной темы с использованием Tailwind CSS. Не нужен JavaScript, только HTML с классами Tailwind. Для темного режима используйте префикс Tailwind dark: для стилизации. Изображения взяты с сайта picsum.photos, а аватары — с сайта randomuser.me.

Открытый

Пользователь упоминает компонент 15

Веб-компонент, отображающий упоминания пользователей в стиле Material Design, с адаптивными эффектами и поддержкой темных тем.

Открытый

Компонент упоминаний пользователя

Пользователь упоминает компонент, реализующий стиль Glassmorphism с адаптивным дизайном и поддержкой темного режима.

Открытый