Components Functional Components Functional Components Component - Dark Mode UI

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.

Preview

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

Art Deco Purple Documentation Component

A moderate complexity documentation/wiki component with an Art Deco design theme, featuring geometric patterns and luxurious styling using a purple/violet color spectrum. Fully responsive with dark mode support.

Open

Glassmorphic Music Player Controls

A glassmorphic music player control component with sepia/brown tones, featuring frosted glass-like translucent elements and blur effects. It's responsive, supports dark mode, and is suitable for music streaming and audio platforms.

Open

Gaming Feature Highlight

A responsive gaming feature highlight component with a clean, minimalist design emphasizing typography and a grid system, using warm neutrals and supporting dark mode. Features a large image, title, description, and action button.

Open