Компонент упоминаний пользователя
Пользователь упоминает компонент, реализующий стиль Glassmorphism с адаптивным дизайном и поддержкой темного режима.
HTML-код
<div class="flex items-center p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20 transition-all duration-300 ease-in-out">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-white font-semibold text-lg dark:text-white">John Doe</p>
<p class="text-gray-200 text-sm dark:text-gray-300">@johndoe</p>
</div>
<button class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800">
Follow
</button>
</div>Связанные компоненты
Компонент упоминаний пользователя
Простой компонент User Mentions, выполненный в бруталистском стиле с цветовой гаммой в оттенках серого, подходит для деловых и корпоративных сайтов. Он включает упоминания пользователей с аватарами и является адаптивным с поддержкой темной темы.
Компонент упоминаний пользователя
Простой и минималистичный пользователь упоминает компонент, с поддержкой темного режима. Кликабельные аватары и имена пользователей отображаются в макете flexbox. Компонент отзывчив и адаптируется под разные размеры экрана.
Компонент упоминаний пользователя
Отзывчивый компонент User Mentions, выполненный в стиле ретро/винтаж и аналогичную цветовую схему, поддерживает темный режим. В нем есть аватары пользователей, имена и текст сообщений, подходящие для интерфейсов социальных сетей.