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

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

Адаптивный компонент User Mentions с элементами 3D-дизайна, цветовой схемой в оттенках серого и поддержкой темных тем для бизнес/корпоративных сайтов. Использует Tailwind CSS и включает в себя изображения/аватары-заполнители.

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

HTML-код

<div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden relative">
      <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div>
      <div class="relative p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">User Mentions</h2>
        <div class="space-y-4">
          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Mentioned you in a comment.</p>
            </div>
          </div>

          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Replied to your thread.</p>
            </div>
          </div>

          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

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

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

Открытый

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

Сложный компонент упоминания пользователя для CRM/Business Tools, отличающийся фиолетово-фиолетовой градиентной цветовой схемой и плавными переходами. Полностью адаптивный с поддержкой темного режима.

Открытый

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

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

Открытый