Functional Components Component - Dark Mode UI
A responsive social media component designed with dark mode and earth tones, suitable for social networking interfaces. Features user avatars, post content, and interaction buttons.
HTML Code
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-md max-w-lg mx-auto dark:bg-gray-900">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<h2 class="text-lg font-semibold">John Doe</h2>
<p class="text-gray-400">@john_doe</p>
</div>
</div>
<div class="mb-4">
<p class="text-gray-300">Just had a great day exploring the mountains! 🌄</p>
<img class="mt-2 rounded-lg" src="https://picsum.photos/600/300?random=1" alt="Nature Image">
</div>
<div class="flex justify-between text-gray-400">
<button class="flex items-center hover:text-white">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
<span class="text-sm">Like</span>
</button>
<button class="flex items-center hover:text-white">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
<span class="text-sm">Comment</span>
</button>
<button class="flex items-center hover:text-white">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
<span class="text-sm">Share</span>
</button>
</div>
</div>Related Components
Functional Components Component
A minimalist portfolio component designed with Tailwind CSS, featuring a vibrant color scheme and supporting dark mode. This component is intended for showcasing work or products and includes images and avatar placeholders.
Functional Components Component
A dashboard component with functional components using Material Design principles, an analogous color scheme, and moderate complexity. The component includes responsive design and dark theme support using Tailwind CSS. No JavaScript is included.