Компонент социальных компонентов
Социальная составляющая для дашборда с бруталистским и пастельным дизайном. Он отображает профиль пользователя с именем, должностью и аватаром, а также включает кнопки для социальных действий, таких как подписка, обмен сообщениями и общий доступ. Компонент отзывчив и поддерживает темный режим.
HTML-код
<div class="bg-pink-200 dark:bg-purple-900 p-6 rounded-lg shadow-xl border-2 border-black">
<div class="flex items-center">
<img class="w-16 h-16 rounded-full border-2 border-black" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
<div class="ml-4">
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">John Doe</h2>
<p class="text-gray-700 dark:text-gray-300">Lead brutalist designer</p>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-4">
<button class="bg-blue-400 hover:bg-blue-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white">Follow</button>
<button class="bg-green-400 hover:bg-green-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-green-600 dark:hover:bg-green-700 dark:text-white">Message</button>
<button class="bg-yellow-400 hover:bg-yellow-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:text-white">Share</button>
</div>
</div>Связанные компоненты
Компонент социальных компонентов
Простая, адаптивная карточка для новостного и журналистского контента с индустриальной эстетикой и осенней цветовой гаммой, включая поддержку темного режима.
Социальная карта Glassmorphism
Простой, отзывчивый компонент социальной карточки glassmorphism с пастельными цветами и поддержкой темного режима, подходящий для интерфейсов приборной панели.
Social_Components_Component
Отзывчивый и интерактивный социальный компонент электронной коммерции с эстетикой 3D-дизайна, дополнительной цветовой схемой и поддержкой темного режима. Содержит обзоры/отзывы пользователей, звездные рейтинги и призыв к действию «поделиться».