Компонент упоминаний пользователя
Пользователь в стиле Neumorphism упоминает компонент с использованием земляных тонов для сайта-портфолио, с адаптивным дизайном и поддержкой темного режима.
HTML-код
<div class="container mx-auto p-8 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-xl-dark">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Mentions</h2>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
<img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>
<div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
<img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">@janesmith</p>
</div>
</div>
<div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
<img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-medium">Peter Jones</p>
<p class="text-sm text-gray-600 dark:text-gray-400">@peterjones</p>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент упоминаний пользователя
Отзывчивый пользователь упоминает компонент для платформ недвижимости, отличающийся акварельным/художественным стилем дизайна с океанскими голубыми тонами. Включает интерактивные элементы и поддержку темного режима.
Компонент упоминаний пользователя
Простой, понятный и отзывчивый пользователь упоминает компонент с яркой цветовой гаммой, разработанный в стиле швейцарской/международной типографики для использования в портфолио. Включает поддержку темного режима.
Компонент упоминаний пользователя
Адаптивный компонент User Mentions с поддержкой темной темы с использованием Tailwind CSS. Не нужен JavaScript, только HTML с классами Tailwind. Для темного режима используйте префикс Tailwind dark: для стилизации. Изображения взяты с сайта picsum.photos, а аватары — с сайта randomuser.me.