Social Components Component
A responsive social media component designed with Neumorphism style and dark theme support, featuring a simple layout and minimal elements.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-md mx-auto mt-10">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div>
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300">@john_doe</p>
</div>
</div>
<p class="mt-4 text-gray-800 dark:text-gray-400">Just another day exploring the wonders of nature!</p>
<img src="https://picsum.photos/400/200" alt="Nature Image" class="mt-4 rounded-lg shadow-lg">
<div class="mt-4 flex justify-between">
<button class="bg-blue-500 text-white rounded-full px-4 py-2 shadow-md hover:bg-blue-600 focus:outline-none">Like</button>
<button class="bg-blue-500 text-white rounded-full px-4 py-2 shadow-md hover:bg-blue-600 focus:outline-none">Comment</button>
</div>
</div>Related Components
Skeuomorphism Social Component
Social media component with Skeuomorphism design, responsive effects and dark theme support.
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
Social Components Component with a Skeuomorphic design, complementary color scheme, and moderate complexity. It's designed for business/corporate websites, is responsive, and supports dark themes.