Plantilla HTML del panel de registro del sitio web

854 thedashboard1

Abrir en el editor Publica tu código

Plantilla HTML del panel de registro del sitio web

Recomendado

29 November 2025

Arquitectura Ingeniería Tailwind CSS Sitio web

30 August 2024

Botón de neón

21 April 2026

Puerto web del juego CloverPit HTML5

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Registrations Dashboard</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f7f9;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 20px;
        }
        h1 {
            color: #0056b3;
            border-bottom: 3px solid #e9ecef;
            padding-bottom: 15px;
            margin-bottom: 25px;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        .stat-card {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s;
        }
        .stat-card:hover {
            transform: translateY(-5px);
        }
        .stat-label {
            font-size: 1em;
            color: #6c757d;
            margin-bottom: 5px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .stat-value {
            font-size: 3em;
            font-weight: 700;
            color: #007bff;
        }
        .recent-registrations h2 {
            color: #343a40;
            margin-bottom: 15px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #dee2e6;
        }
        th {
            background-color: #007bff;
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.9em;
        }
        tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        tr:hover {
            background-color: #e9f0f7;
        }
    </style>
</head>
<body>

<div class="container">
        <h1>Website Registrations Dashboard</h1>

<div class="stats-grid">
            
            <div class="stat-card">
                <div class="stat-label">Total Users Registered</div>
                <div class="stat-value">14,521</div>
            </div>

<div class="stat-card">
                <div class="stat-label">Registrations Today</div>
                <div class="stat-value">87</div>
            </div>

<div class="stat-card">
                <div class="stat-label">Registrations This Week</div>
                <div class="stat-value">593</div>
            </div>

<div class="stat-card">
                <div class="stat-label">Conversion Rate (MoM)</div>
                <div class="stat-value">3.4%</div>
            </div>

</div>

<div class="recent-registrations">
            <h2>Recent Activity</h2>
            <table>
                <thead>
                    <tr>
                        <th>User ID</th>
                        <th>Email Address</th>
                        <th>Registration Date</th>
                        <th>Source</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>#10045</td>
                        <td>alice.j@example.com</td>
                        <td>2023-10-27 14:30</td>
                        <td>Google Ads</td>
                        <td>Active</td>
                    </tr>
                    <tr>
                        <td>#10044</td>
                        <td>mark.t@example.net</td>
                        <td>2023-10-27 14:15</td>
                        <td>Organic Search</td>
                        <td>Active</td>
                    </tr>
                    <tr>
                        <td>#10043</td>
                        <td>sara.p@example.org</td>
                        <td>2023-10-27 13:55</td>
                        <td>Direct Traffic</td>
                        <td>Pending Verification</td>
                    </tr>
                    <tr>
                        <td>#10042</td>
                        <td>johnny.b@example.com</td>
                        <td>2023-10-27 11:20</td>
                        <td>Social Media</td>
                        <td>Active</td>
                    </tr>
                    <tr>
                        <td>#10041</td>
                        <td>emma.w@example.co</td>
                        <td>2023-10-26 18:01</td>
                        <td>Referral Link</td>
                        <td>Active</td>
                    </tr>
                </tbody>
            </table>
        </div>

</div>

</body>
</html>

CSS