Компонент социальных компонентов
Простой компонент социальных сетей, использующий Tailwind CSS и разработанный с использованием принципов Material Design. Он отличается яркими цветами и поддержкой темного режима, что делает его подходящим для интерфейсов социальных сетей.
HTML-код
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Social Media Image">
<div class="p-4">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300">@johndoe</p>
</div>
</div>
<p class="mt-2 text-gray-600 dark:text-gray-300">This is a sample post demonstrating the vibrant and energetic design suitable for social media engagement.</p>
<div class="mt-4 flex justify-between">
<button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Like</button>
<button class="px-4 py-2 text-white bg-green-500 rounded hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700">Comment</button>
</div>
</div>
</div>Связанные компоненты
Социальные составляющие
Скевоморфный социальный компонент, предназначенный для блогов/контента, с яркими цветами и поддержкой темного режима.
Компонент социальных компонентов
Бруталистская, сложная и ориентированная на электронную коммерцию социальная составляющая с аналогичной цветовой гаммой, реализованная с помощью Tailwind CSS. Он отзывчив и поддерживает темный режим.
Social_Components_Component
Отзывчивый и интерактивный социальный компонент электронной коммерции с эстетикой 3D-дизайна, дополнительной цветовой схемой и поддержкой темного режима. Содержит обзоры/отзывы пользователей, звездные рейтинги и призыв к действию «поделиться».