Компонент "Профили пользователей"
Компонент профилей пользователей, предназначенный для темной панели управления с пастельной цветовой гаммой и функциями умеренной сложности.
HTML-код
<div class="bg-gray-900 text-gray-300 p-6 rounded-lg shadow-lg space-y-6">
<h2 class="text-2xl font-bold text-center">User Profiles</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- User Profile Card -->
<div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-xl font-semibold text-center">John Doe</h3>
<p class="text-center">Software Developer</p>
<div class="mt-4 flex justify-between">
<button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
<button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
</div>
</div>
<!-- User Profile Card -->
<div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-xl font-semibold text-center">Jane Smith</h3>
<p class="text-center">Product Manager</p>
<div class="mt-4 flex justify-between">
<button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
<button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
</div>
</div>
<!-- User Profile Card -->
<div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-xl font-semibold text-center">Michael Johnson</h3>
<p class="text-center">UX Designer</p>
<div class="mt-4 flex justify-between">
<button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
<button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
</div>
</div>
<!-- Add more user profiles as needed -->
</div>
</div>Связанные компоненты
Компонент профилей пользователей в оттенках серого в стиле ар-деко
Адаптивный компонент профилей пользователей с геометрическим дизайном в оттенках серого в стиле ар-деко, подходящий для досок объявлений о работе или карьерных платформ, включая поддержку темного режима.
Компонент "Профили пользователей"
Простая, адаптивная карточка профиля пользователя для маркетплейса с органическим дизайном, вдохновленным природой, с фирменными синими тонами и поддержкой темного режима.
Компонент "Профили пользователей"
Адаптивный компонент профилей пользователей для панели управления с пастельной темой в темном режиме, созданный с помощью Tailwind CSS. В нем отображаются аватары пользователей, имена, роли и краткое описание с кнопкой подписки. Дизайн адаптируется к разным размерам экрана и поддерживает темный режим в зависимости от предпочтений системы.