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

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

Отзывчивый компонент User Mentions, стилизованный под тона Neumorphism и Earth для интерфейсов социальных сетей, с поддержкой темных тем.

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

HTML-код

<div class="max-w-md mx-auto py-8">
    <!-- Title -->
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">User Mentions</h2>

    <!-- Mentions List -->
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-5">
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-gray-500 dark:text-gray-400">@john_doe</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
                <p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">Mike Taylor</p>
                <p class="text-gray-500 dark:text-gray-400">@mike_taylor</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
    </div>
</div>

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

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

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

Открытый

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

Отзывчивый пользователь упоминает компонент, предназначенный для темного режима с поддержкой Tailwind CSS.

Открытый

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

User Mentions Component с поддержкой темного режима, с отзывчивыми эффектами и поддержкой темной темы. Использует случайные изображения-заполнители из picsum.photos для изображений и randomuser.me для аватаров.

Открытый