Componentes Componentes de diseño Componente de diseño de panel

Componente de diseño de panel

Un diseño de tablero receptivo con estética de Material Design, que incluye una barra lateral, un encabezado y un área de contenido principal. Es compatible con el modo oscuro y utiliza colores complementarios para un aspecto equilibrado. La complejidad es moderada, con características similares a las interactivas logradas únicamente con las clases CSS y Tailwind.

Vista previa

Código HTML

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col md:flex-row">

    <!-- Sidebar -->
    <div class="w-full md:w-64 bg-white dark:bg-gray-800 shadow-lg md:shadow-none p-4 space-y-4 flex flex-col items-center md:items-start">
        <div class="text-2xl font-bold text-indigo-600 dark:text-orange-400">Dashboard</div>
        <nav class="space-y-2 w-full">
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-home"></i><span>Home</span></a>
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-chart-line"></i><span>Analytics</span></a>
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-cog"></i><span>Settings</span></a>
        </nav>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col">

        <!-- Header -->
        <header class="w-full bg-white dark:bg-gray-800 shadow-md p-4 flex justify-between items-center">
            <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Overview</h1>
            <div class="flex items-center space-x-4">
                <button class="text-gray-600 dark:text-gray-300 focus:outline-none"><i class="fas fa-bell"></i></button>
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-indigo-500 dark:border-orange-400">
            </div>
        </header>

        <!-- Content Grid -->
        <main class="flex-1 p-4 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 flex flex-col justify-between transform transition duration-300 hover:scale-105">
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Total Sales</h2>
                    <p class="text-3xl font-bold text-indigo-600 dark:text-orange-400 mt-2">$12,345</p>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">+5% from last month</p>
            </div>

            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col justify-between transform transition duration-300 hover:scale-105">
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">New Users</h2>
                    <p class="text-3xl font-bold text-indigo-600 dark:text-orange-400 mt-2">2,145</p>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">+12% from last week</p>
            </div>

            <!-- Card 3 (Image Card) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 flex flex-col transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Data Visualization</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300 mt-2 flex-grow">A quick look at the latest data trends and insights.</p>
                <button class="mt-4 self-end px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-300">View Details</button>
            </div>

            <!-- Card 4 (Chart Placeholder) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 col-span-1 md:col-span-2 transform transition duration-300 hover:scale-105">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Sales Performance</h2>
                <div class="mt-4 h-48 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
                    <p class="text-gray-500 dark:text-gray-400">Chart Placeholder</p>
                </div>
            </div>

        </main>
    </div>

</div>

<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Componentes relacionados

Componente de diseño de modo oscuro

Un componente de diseño responsivo con soporte de modo oscuro mediante Tailwind CSS. Cuenta con un encabezado, un área de contenido y un pie de página simples. El modo oscuro se maneja mediante el prefijo 'dark:' en las clases de Tailwind.

Abrir

Diseño de portafolio en modo oscuro

Un componente de diseño responsivo en modo oscuro para carteras, con un esquema de color monocromático utilizando Tailwind CSS. Incluye marcadores de posición para el contenido y está diseñado para una complejidad moderada sin JavaScript.

Abrir

Componente de diseño de comercio electrónico

Un componente de diseño de comercio electrónico simple y receptivo con una estética de diseño de materiales en escala de grises, con una cuadrícula de productos, un encabezado y un pie de página, todos con soporte para modo oscuro. Utiliza picsum.photos para las imágenes de productos.

Abrir