Plantilla HTML del panel de administración

12 AdminDashboard

Abrir en el editor Video Publica tu código

Plantilla HTML del panel de administración

Recomendado

27 February 2024

Botón HTML CSS

16 October 2025

Fragmento HTML de cargador de cilindros CSS

19 October 2025

Transformación de formas de partículas con controles en Three.js

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #4f46e5;
            --secondary: #64748b;
            --dark: #1e293b;
            --light: #f8fafc;
            --sidebar-width: 260px;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', -apple-system, sans-serif;
        }

body {
            background-color: #f1f5f9;
            display: flex;
        }

/* Sidebar */
        .sidebar {
            width: var(--sidebar-width);
            height: 100vh;
            background: var(--dark);
            color: white;
            position: fixed;
            padding: 1.5rem;
        }

.sidebar-brand {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

.nav-link {
            display: flex;
            align-items: center;
            padding: 0.8rem 1rem;
            color: #94a3b8;
            text-decoration: none;
            border-radius: 8px;
            margin-bottom: 0.5rem;
            transition: 0.3s;
        }

.nav-link:hover, .nav-link.active {
            background: var(--primary);
            color: white;
        }

.nav-link i {
            margin-right: 12px;
            width: 20px;
        }

/* Main Content */
        .main-content {
            margin-left: var(--sidebar-width);
            width: calc(100% - var(--sidebar-width));
            padding: 2rem;
        }

.header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

.user-profile {
            display: flex;
            align-items: center;
            gap: 12px;
        }

.user-profile img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

/* Stats Cards */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

.card {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

.card-title {
            color: var(--secondary);
            font-size: 0.875rem;
            text-transform: uppercase;
            font-weight: 600;
        }

.card-value {
            font-size: 1.875rem;
            font-weight: bold;
            margin: 0.5rem 0;
            color: var(--dark);
        }

.card-trend {
            font-size: 0.875rem;
        }

.trend-up { color: #10b981; }
        .trend-down { color: #ef4444; }

/* Table */
        .data-table-container {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }

th {
            text-align: left;
            padding: 12px;
            border-bottom: 2px solid #f1f5f9;
            color: var(--secondary);
            font-weight: 600;
        }

td {
            padding: 12px;
            border-bottom: 1px solid #f1f5f9;
            color: var(--dark);
        }

.status {
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
        }

.status-paid { background: #dcfce7; color: #166534; }
        .status-pending { background: #fef9c3; color: #854d0e; }

@media (max-width: 768px) {
            .sidebar { width: 70px; padding: 1rem; }
            .sidebar-brand span, .nav-link span { display: none; }
            .main-content { margin-left: 70px; width: calc(100% - 70px); }
        }
    </style>
</head>
<body>

<aside class="sidebar">
        <div class="sidebar-brand">
            <i class="fas fa-bolt"></i>
            <span>AdminPro</span>
        </div>
        <nav>
            <a href="#" class="nav-link active">
                <i class="fas fa-chart-pie"></i>
                <span>Dashboard</span>
            </a>
            <a href="#" class="nav-link">
                <i class="fas fa-users"></i>
                <span>Users</span>
            </a>
            <a href="#" class="nav-link">
                <i class="fas fa-shopping-cart"></i>
                <span>Orders</span>
            </a>
            <a href="#" class="nav-link">
                <i class="fas fa-box"></i>
                <span>Products</span>
            </a>
            <a href="#" class="nav-link">
                <i class="fas fa-cog"></i>
                <span>Settings</span>
            </a>
        </nav>
    </aside>

<main class="main-content">
        <header class="header">
            <h1>Dashboard Overview</h1>
            <div class="user-profile">
                <div style="text-align: right">
                    <div style="font-weight: bold">Alex Johnson</div>
                    <div style="font-size: 0.8rem; color: var(--secondary)">Super Admin</div>
                </div>
                <img src="https://ui-avatars.com/api/?name=Alex+Johnson&background=4f46e5&color=fff" alt="Profile">
            </div>
        </header>

<div class="stats-grid">
            <div class="card">
                <div class="card-title">Total Revenue</div>
                <div class="card-value">$54,230</div>
                <div class="card-trend trend-up">
                    <i class="fas fa-arrow-up"></i> 12% since last month
                </div>
            </div>
            <div class="card">
                <div class="card-title">Active Users</div>
                <div class="card-value">1,240</div>
                <div class="card-trend trend-up">
                    <i class="fas fa-arrow-up"></i> 5.4% since last week
                </div>
            </div>
            <div class="card">
                <div class="card-title">New Orders</div>
                <div class="card-value">452</div>
                <div class="card-trend trend-down">
                    <i class="fas fa-arrow-down"></i> 2.1% since yesterday
                </div>
            </div>
            <div class="card">
                <div class="card-title">Pending Tasks</div>
                <div class="card-value">12</div>
                <div class="card-trend">No change</div>
            </div>
        </div>

<div class="data-table-container">
            <h3>Recent Transactions</h3>
            <table>
                <thead>
                    <tr>
                        <th>Customer</th>
                        <th>Date</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>John Doe</td>
                        <td>Oct 24, 2023</td>
                        <td>$120.00</td>
                        <td><span class="status status-paid">Paid</span></td>
                        <td><i class="fas fa-ellipsis-h" style="cursor:pointer"></i></td>
                    </tr>
                    <tr>
                        <td>Sarah Smith</td>
                        <td>Oct 23, 2023</td>
                        <td>$850.50</td>
                        <td><span class="status status-pending">Pending</span></td>
                        <td><i class="fas fa-ellipsis-h" style="cursor:pointer"></i></td>
                    </tr>
                    <tr>
                        <td>Mike Wilson</td>
                        <td>Oct 22, 2023</td>
                        <td>$45.00</td>
                        <td><span class="status status-paid">Paid</span></td>
                        <td><i class="fas fa-ellipsis-h" style="cursor:pointer"></i></td>
                    </tr>
                    <tr>
                        <td>Emma Davis</td>
                        <td>Oct 22, 2023</td>
                        <td>$210.00</td>
                        <td><span class="status status-paid">Paid</span></td>
                        <td><i class="fas fa-ellipsis-h" style="cursor:pointer"></i></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main>

</body>
</html>

Recomendado

Botón HTML CSS

Fragmento HTML de cargador de cilindros CSS

Transformación de formas de partículas con controles en Three.js

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS