Социальные составляющие
Раздел социальных компонентов, выполненный в скевоморфном стиле, с отзывчивыми эффектами и поддержкой темных тем.
HTML-код
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto flex flex-col items-center">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Connect with Us</h2>
<div class="flex flex-row space-x-4">
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/100/100?random=1" alt="Facebook" class="rounded-full mb-2">
<h3 class="font-bold text-gray-700 dark:text-gray-200">Facebook</h3>
<p class="text-gray-600 dark:text-gray-400">Follow us on Facebook.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/100/100?random=2" alt="Twitter" class="rounded-full mb-2">
<h3 class="font-bold text-gray-700 dark:text-gray-200">Twitter</h3>
<p class="text-gray-600 dark:text-gray-400">Follow us on Twitter.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/100/100?random=3" alt="Instagram" class="rounded-full mb-2">
<h3 class="font-bold text-gray-700 dark:text-gray-200">Instagram</h3>
<p class="text-gray-600 dark:text-gray-400">Follow us on Instagram.</p>
</div>
</div>
<div class="mt-6 flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-16 h-16 mb-2">
<h4 class="font-semibold text-gray-800 dark:text-white">John Doe</h4>
<p class="text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>Связанные компоненты
Компонент социальных компонентов
Компонент портфолио, выполненный в темном режиме с монохроматической цветовой гаммой. В нем представлены работы или товары с помощью простой верстки.
Компонент социальных компонентов
Социальная составляющая для дашборда с бруталистским и пастельным дизайном. Он отображает профиль пользователя с именем, должностью и аватаром, а также включает кнопки для социальных действий, таких как подписка, обмен сообщениями и общий доступ. Компонент отзывчив и поддерживает темный режим.
3D Социальная Карта Автора
Адаптивный компонент карточки автора с 3D-эффектами и ссылками на социальные сети, предназначенный для разделов блога и контента. Он имеет дополнительную цветовую схему (синий для идентификации/информации, оранжевый для акцентов/CTA), поддерживает темный режим и использует Tailwind CSS для стилизации. Дизайн имеет «простую» сложность с базовой компоновкой и минимальным количеством элементов, но «3D-дизайн» включен для глубины и вовлечения с использованием теней и эффектов наведения. Компонент включает в себя аватар, имя автора, краткую биографию, иконки социальных сетей и кнопку призыва к действию «Следуй за мной». Он использует аватар randomuser.me в качестве заполнителя.