Компонент упоминаний пользователя
Простой, отзывчивый пользователь упоминает компонент со скевоморфизмом, аналогичной цветовой схемой и поддержкой темного режима.
HTML-код
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-xl">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-4 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<p class="text-gray-800 dark:text-gray-200 font-semibold text-lg">John Doe</p>
</div>
<p class="text-gray-700 dark:text-gray-300">
Mentioned you in a comment:
<span class="text-blue-600 dark:text-blue-400">@JaneSmith</span> This is a great point!
</p>
</div>Связанные компоненты
Пользователь упоминает компонент 15
Веб-компонент, отображающий упоминания пользователей в стиле Material Design, с адаптивными эффектами и поддержкой темных тем.
Компонент упоминаний пользователя
Адаптивный компонент User Mentions с поддержкой темной темы с использованием Tailwind CSS. Не нужен JavaScript, только HTML с классами Tailwind. Для темного режима используйте префикс Tailwind dark: для стилизации. Изображения взяты с сайта picsum.photos, а аватары — с сайта randomuser.me.
Компонент упоминаний пользователя
Сложный, монохроматический пользователь в индустриальном стиле упоминает компонент для веб-сайтов о путешествиях и туризме, отличающийся сырьем, открытыми элементами и утилитарной эстетикой. Он полностью отзывчив и поддерживает темный режим.