Компонент упоминаний пользователя
Отзывчивый компонент User Mentions, выполненный в стиле ретро/винтаж и аналогичную цветовую схему, поддерживает темный режим. В нем есть аватары пользователей, имена и текст сообщений, подходящие для интерфейсов социальных сетей.
HTML-код
<div class="p-4 bg-gradient-to-r from-yellow-400 to-pink-500 dark:from-yellow-600 dark:to-pink-700 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-xl font-bold text-white mb-4">User Mentions</h2>
<div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex flex-col">
<span class="text-black dark:text-white font-semibold">John Doe</span>
<p class="text-gray-700 dark:text-gray-400">Mentioned you in a post</p>
</div>
</div>
<div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
<img src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex flex-col">
<span class="text-black dark:text-white font-semibold">Jane Smith</span>
<p class="text-gray-700 dark:text-gray-400">Commented on your photo</p>
</div>
</div>
<div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex flex-col">
<span class="text-black dark:text-white font-semibold">Michael Brown</span>
<p class="text-gray-700 dark:text-gray-400">Started following you</p>
</div>
</div>
</div>
Связанные компоненты
Компонент упоминаний пользователя
Отзывчивый пользователь упоминает компонент с поддержкой темной темы и микровзаимодействиями, разработанный для бизнес-сайтов с использованием Tailwind CSS.
Компонент упоминаний пользователя
Отзывчивый пользователь упоминает компонент, разработанный для интерфейсов электронной коммерции в темном режиме, с земляными тонами и заполнителями аватаров пользователей и изображений товаров. Предоставляет список предлагаемых упоминаний с информацией о пользователе и связанном продукте, подходящем для добавления тегов или функций совместной работы.
Компонент упоминаний пользователя
Скевоморфный пользователь упоминает компонент, предназначенный для имитации реальных элементов, с отзывчивыми эффектами и поддержкой темной темы с использованием Tailwind CSS.