Компонент упоминаний пользователя
Компонент User Mention Component, разработанный в стиле Glassmorphism с полупрозрачными элементами, похожими на матовое стекло, с эффектами размытия. Он включает в себя поддержку темной темы и является адаптивным, что делает его подходящим для веб-сайтов электронной коммерции.
HTML-код
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gradient-to-b from-gray-800 to-gray-900">
<div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">User Mentions</h2>
<div class="mt-4 space-y-4">
<div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
<div class="ml-3">
<p class="text-gray-800 dark:text-white font-medium">John Doe</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">@john_doe</p>
</div>
<img src="https://picsum.photos/200/100" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
</div>
<div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-green-500">
<div class="ml-3">
<p class="text-gray-800 dark:text-white font-medium">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">@jane_smith</p>
</div>
<img src="https://picsum.photos/200/101" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
</div>
<div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<img src="https://randomuser.me/api/portraits/men/13.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-500">
<div class="ml-3">
<p class="text-gray-800 dark:text-white font-medium">Mike Johnson</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">@mike_johnson</p>
</div>
<img src="https://picsum.photos/200/102" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
</div>
</div>
<button class="mt-6 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-300 w-full">View More</button>
</div>
</div>Связанные компоненты
Компонент упоминаний пользователя
Отзывчивый компонент User Mentions, выполненный в стиле ретро/винтаж и аналогичную цветовую схему, поддерживает темный режим. В нем есть аватары пользователей, имена и текст сообщений, подходящие для интерфейсов социальных сетей.
Компонент упоминаний пользователя
Адаптивный компонент User Mentions с элементами 3D-дизайна, цветовой схемой в оттенках серого и поддержкой темных тем для бизнес/корпоративных сайтов. Использует Tailwind CSS и включает в себя изображения/аватары-заполнители.
Компонент упоминаний пользователя - скевоморфизм
Пользователь упоминает компонент с дизайном скевоморфизма, адаптивными эффектами и поддержкой темной темы, используя только html с попутным CSS. Javascript не нужен.