Social Components Component
Social Components Component with Brutalism design, responsive effects, and dark theme support.
HTML Code
<div class="bg-white dark:bg-gray-900 text-black dark:text-white border-4 border-black dark:border-white p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold font-mono">Social Feed</h2>
<button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 border-2 border-black dark:border-white font-mono">Follow</button>
</div>
<div class="space-y-6">
<div class="border-2 border-black dark:border-white p-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
<div class="ml-4">
<p class="font-bold font-mono">John Doe</p>
<p class="text-sm font-mono">@johndoe</p>
</div>
</div>
<p class="mb-4 font-mono">This is an example social media post. Exciting content and brutalist design!</p>
<img src="https://picsum.photos/600/400" alt="Post Image" class="w-full h-48 object-cover border-2 border-black dark:border-white">
<div class="flex justify-between mt-4 font-mono">
<span>Likes: 100</span>
<span>Comments: 20</span>
</div>
</div>
<div class="border-2 border-black dark:border-white p-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
<div class="ml-4">
<p class="font-bold font-mono">Jane Smith</p>
<p class="text-sm font-mono">@janesmith</p>
</div>
</div>
<p class="mb-4 font-mono">Another brutalist-inspired post. Raw and captivating!</p>
<div class="flex justify-between mt-4 font-mono">
<span>Likes: 50</span>
<span>Comments: 15</span>
</div>
</div>
</div>
</div>Related Components
Social Components Component
A responsive social media component designed with a retro/vintage aesthetic, featuring a rich interface with multiple interactive elements and a dark theme.
3D Social Author Card
A responsive author card component with 3D effects and social media links, designed for blog/content sections. It features a complementary color scheme (Blue for identity/info, Orange for accents/CTA), supports dark mode, and uses Tailwind CSS for styling. The design is 'Simple' complexity with a basic layout and minimal elements, yet '3D Design' is incorporated for depth and engagement using shadows and hover effects. The component includes an avatar, author name, a short bio, social media icons, and a 'Follow Me' call-to-action button. It uses a randomuser.me avatar as a placeholder.
Social Components Component
A simple social media component using Tailwind CSS and designed with Material Design principles. It features vibrant colors and dark mode support, making it suitable for social networking interfaces.