Компонент "Профили пользователей"
Адаптивный компонент профилей пользователей со стилем дизайна glassmorphism, поддержкой темных тем и использованием Tailwind CSS.
HTML-код
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Web Developer</p>
<ul class="mt-4 space-y-2 text-center">
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> New York, USA</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> January 1, 1990</li>
</ul>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full mt-6">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
<ul class="mt-4 space-y-2 text-center">
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> London, UK</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> March 5, 1992</li>
</ul>
</div>
</div>
</div>
<!-- Add Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">Связанные компоненты
Компонент профилей пользователей с яркими цветами
Компонент профилей пользователей Neumorphism с яркими цветами для Business/Corporate сайтов, адаптивный дизайн с поддержкой темных тем.
Компонент "Профили пользователей"
Адаптивный компонент профилей пользователей для панели управления с пастельной темой в темном режиме, созданный с помощью Tailwind CSS. В нем отображаются аватары пользователей, имена, роли и краткое описание с кнопкой подписки. Дизайн адаптируется к разным размерам экрана и поддерживает темный режим в зависимости от предпочтений системы.
Компонент "Профили пользователей"
Компонент профилей пользователей, выполненный в стиле брутализма с использованием Tailwind CSS, с монохроматической цветовой схемой и предоставляющий интерфейс для социальных сетей. Он поддерживает темный режим и является отзывчивым.