Компонент социальных компонентов
Компонент социальных сетей, разработанный для портфолио, с адаптивным дизайном и поддержкой темных тем с использованием Tailwind CSS. Он включает в себя заполнители для аватаров и имен пользователей.
HTML-код
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md w-full max-w-sm mx-auto">
<div class="flex items-center">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/81.jpg" alt="Avatar">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Jane Doe</h2>
</div>
<p class="mt-4 text-gray-600 dark:text-gray-300">Sharing my latest design project! Check out the details and let me know what you think.</p>
<div class="flex justify-between items-center mt-6">
<div class="flex space-x-4">
<svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.803 2.855l-1.782 5.583a2 2 0 01-1.803 1.112H9.118c-.748 0-1.504-.316-1.88-.922l-.443-.665A2 2 0 015 15.999v-3l2-2h2.586a1 1 0 01.707.293l2.586 2.586z"></path></svg>
<svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.913 9.913 0 01-3.981-.815Thead6C.851 17.542.001 14.824.001 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
</div>
<span class="text-gray-500 dark:text-gray-400 text-sm">2h ago</span>
</div>
</div>Связанные компоненты
Скевоморфизм социальной составляющей
Компонент социальных сетей с дизайном скевоморфизма, отзывчивыми эффектами и поддержкой темных тем.
Компонент социальных компонентов
Социальная составляющая для дашборда с бруталистским и пастельным дизайном. Он отображает профиль пользователя с именем, должностью и аватаром, а также включает кнопки для социальных действий, таких как подписка, обмен сообщениями и общий доступ. Компонент отзывчив и поддерживает темный режим.
Компонент социальных компонентов
Компонент портфолио, выполненный в темном режиме с монохроматической цветовой гаммой. В нем представлены работы или товары с помощью простой верстки.