<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Incluir Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>

<body class="bg-gray-50">

    <div class="flex h-screen">

        <!-- Sidebar -->
        <div class="w-64 bg-blue-800 text-white p-6 flex flex-col justify-between shadow-lg rounded-r-3xl">
            <div>
                <h1 class="text-3xl font-bold mb-8">Dashboard</h1>
                <nav>
                    <ul>
                        <li class="mb-4 flex items-center space-x-4">
                            <!-- Icono de inicio -->
                            <i class="fas fa-home h-6 w-6 text-blue-300"></i>
                            <a href="#" class="text-lg hover:text-blue-300 transition duration-300">Inicio</a>
                        </li>
                        <li class="mb-4 flex items-center space-x-4">
                            <!-- Icono de usuarios -->
                            <i class="fas fa-users h-6 w-6 text-blue-300"></i>
                            <a href="#" class="text-lg hover:text-blue-300 transition duration-300">Usuarios</a>
                        </li>
                        <li class="mb-4 flex items-center space-x-4">
                            <!-- Icono de configuración -->
                            <i class="fas fa-cogs h-6 w-6 text-blue-300"></i>
                            <a href="#" class="text-lg hover:text-blue-300 transition duration-300">Configuración</a>
                        </li>
                        <li class="mb-4 flex items-center space-x-4">
                            <!-- Icono de reportes -->
                            <i class="fas fa-chart-pie h-6 w-6 text-blue-300"></i>
                            <a href="#" class="text-lg hover:text-blue-300 transition duration-300">Reportes</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div>
                <button class="bg-blue-600 hover:bg-blue-500 px-4 py-2 rounded-lg text-white w-full mt-4 transition duration-300">
                    Cerrar sesión
                </button>
            </div>
        </div>

        <!-- Main content -->
        <div class="flex-1 p-8 overflow-y-auto">
            <div class="bg-white p-8 rounded-xl shadow-2xl">
                <h2 class="text-3xl font-semibold text-gray-800 mb-6">Bienvenido al Dashboard</h2>
                <p class="text-gray-600">Aquí puedes gestionar todas las configuraciones y ver los reportes de tu sistema.</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-8">
                <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition duration-300">
                    <h3 class="text-xl font-semibold text-blue-700">Usuarios Activos</h3>
                    <p class="text-gray-600 text-3xl font-bold">150</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition duration-300">
                    <h3 class="text-xl font-semibold text-blue-700">Ventas Mensuales</h3>
                    <p class="text-gray-600 text-3xl font-bold">$10,250</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition duration-300">
                    <h3 class="text-xl font-semibold text-blue-700">Nuevas Suscripciones</h3>
                    <p class="text-gray-600 text-3xl font-bold">30</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition duration-300">
                    <h3 class="text-xl font-semibold text-blue-700">Tickets Abiertos</h3>
                    <p class="text-gray-600 text-3xl font-bold">5</p>
                </div>
            </div>
             <div class="bg-white p-8 rounded-xl shadow-2xl">
                  <!-- Sección de botones -->
            <div class="mb-8">
                <div class="flex justify-end space-x-4">
                    <button class="bg-blue-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-blue-500 transition duration-300">
                        <i class="fas fa-search mr-2"></i> Buscar
                    </button>
                    <button class="bg-green-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-green-500 transition duration-300">
                        <i class="fas fa-plus mr-2"></i> Añadir
                    </button>
                    <button class="bg-yellow-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-yellow-500 transition duration-300">
                        <i class="fas fa-edit mr-2"></i> Editar
                    </button>
                    <button class="bg-red-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-red-500 transition duration-300">
                        <i class="fas fa-trash mr-2"></i> Eliminar
                    </button>
                    <button class="bg-gray-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-gray-500 transition duration-300">
                        <i class="fas fa-check mr-2"></i> Aceptar
                    </button>
                </div>
            </div>

                 <!-- Tabla con lista predefinida -->
            <div class="overflow-x-auto bg-white shadow-2xl rounded-lg">
                <table class="min-w-full table-auto text-gray-600">
                    <thead>
                        <tr class="bg-blue-800 text-white">
                            <th class="py-3 px-6 text-left">ID</th>
                            <th class="py-3 px-6 text-left">Nombre</th>
                            <th class="py-3 px-6 text-left">Acción</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="border-b">
                            <td class="py-3 px-6">001</td>
                            <td class="py-3 px-6">Producto A</td>
                            <td class="py-3 px-6 flex space-x-2">
                                <button class="bg-green-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-green-500 transition duration-300">
                                    <i class="fas fa-check"></i> Aceptar
                                </button>
                                <button class="bg-red-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-red-500 transition duration-300">
                                    <i class="fas fa-trash"></i> Eliminar
                                </button>
                            </td>
                        </tr>
                        <tr class="border-b">
                            <td class="py-3 px-6">002</td>
                            <td class="py-3 px-6">Producto B</td>
                            <td class="py-3 px-6 flex space-x-2">
                                <button class="bg-green-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-green-500 transition duration-300">
                                    <i class="fas fa-check"></i> Aceptar
                                </button>
                                <button class="bg-red-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-red-500 transition duration-300">
                                    <i class="fas fa-trash"></i> Eliminar
                                </button>
                            </td>
                        </tr>
                        <tr class="border-b">
                            <td class="py-3 px-6">003</td>
                            <td class="py-3 px-6">Producto C</td>
                            <td class="py-3 px-6 flex space-x-2">
                                <button class="bg-green-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-green-500 transition duration-300">
                                    <i class="fas fa-check"></i> Aceptar
                                </button>
                                <button class="bg-red-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-red-500 transition duration-300">
                                    <i class="fas fa-trash"></i> Eliminar
                                </button>
                            </td>
                        </tr>
                        <tr class="border-b">
                            <td class="py-3 px-6">004</td>
                            <td class="py-3 px-6">Producto D</td>
                            <td class="py-3 px-6 flex space-x-2">
                                <button class="bg-green-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-green-500 transition duration-300">
                                    <i class="fas fa-check"></i> Aceptar
                                </button>
                                <button class="bg-red-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-red-500 transition duration-300">
                                    <i class="fas fa-trash"></i> Eliminar
                                </button>
                            </td>
                        </tr>
                        <tr class="border-b">
                            <td class="py-3 px-6">005</td>
                            <td class="py-3 px-6">Producto E</td>
                            <td class="py-3 px-6 flex space-x-2">
                                <button class="bg-green-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-green-500 transition duration-300">
                                    <i class="fas fa-check"></i> Aceptar
                                </button>
                                <button class="bg-red-600 text-white py-2 px-4 rounded-lg flex items-center hover:bg-red-500 transition duration-300">
                                    <i class="fas fa-trash"></i> Eliminar
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            </div>
        </div>
        

    </div>

</body>

</html>
