Компонент социальных компонентов
Компонент социальных сетей, разработанный для портфолио, с адаптивным дизайном и поддержкой темных тем с использованием 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>Связанные компоненты
Компонент социальных компонентов
Сложный социальный компонент в индустриальном стиле для систем бронирования и бронирования с холодными нейтральными цветами, открытыми элементами и поддержкой темного режима. Предназначен для систем записи и бронирования.
Компонент социальных компонентов
Компонент социальных сетей в стиле ретро/винтаж с богатым интерфейсом с множеством интерактивных элементов, разработанным с использованием дополнительных цветов и поддерживающим темный режим.
Компонент социальных компонентов
Компонент социальных компонентов со скевоморфным дизайном, дополнительной цветовой гаммой и умеренной сложностью. Он разработан для бизнес/корпоративных сайтов, адаптивный и поддерживает темные темы.