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.
HTML Code
<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>Related Components
Social Components
A web component featuring a glassmorphism design with frosted glass-like translucent elements and blur effects, responsive effects, and dark theme support.
Social Components Component
A microinteractions-focused social component for blogs with engaging animations and a monochromatic color scheme.
Social Components Component
A portfolio component designed in dark mode with a monochromatic color scheme. It showcases work or products with a simple layout.