Components Functional Components Functional Components Component

Functional Components Component

Minimalist dashboard functional component with responsive design and dark theme support.

Preview

HTML Code

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white p-4 sm:p-6 lg:p-8">
    <div class="container mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- Card 1 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Total Users</h2>
                <p class="text-3xl font-bold">1500</p>
            </div>
            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Revenue</h2>
                <p class="text-3xl font-bold">$5000</p>
            </div>
            <!-- Card 3 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Orders</h2>
                <p class="text-3xl font-bold">300</p>
            </div>
        </div>
    </div>
</div>

Related Components

Functional Components Component - Brutalism Style

A functional web component designed in a brutalist style using Tailwind CSS. The component features a bold layout with high contrast, responsive effects, and support for dark themes. It includes placeholder images and avatars for visual appeal.

Open

Functional Components Component

A component featuring glassmorphism design style with responsive effects and dark theme support, using Tailwind CSS.

Open

Functional Components Component

A social media component designed with Brutalism style and pastel colors, featuring a complex interface for interactions, with dark mode support.

Open