1 <!DOCTYPE html>2 <html lang="es">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Plataforma Cloud</title>7 <style>8 /* Estilos previos... */9 .tabs {10 display: flex;11 background-color: #f1f1f1;12 border-bottom: 1px solid #ddd;13 }14 .tab {15 padding: 10px;16 border: 1px solid #ccc;17 margin-right: 5px;18 cursor: pointer;19 }20 .tab.active {21 background-color: #fff;22 border-bottom: none;23 }24 .content {25 display: flex;26 flex-wrap: nowrap;27 width: 100%;28 }29 .pane {30 flex-grow: 1;31 border-right: 1px solid #ddd;32 padding: 10px;33 }34 .pane:last-child {35 border-right: none;36 }37 </style>38 </head>39 <body>40 <div class="tabs">41 <div class="tab" onclick="openService('Database')">Base de Datos</div>42 <div class="tab" onclick="openService('Logs')">Logs</div>43 <div class="tab" onclick="openService('Lambdas')">Lambdas</div>44 <div class="tab" onclick="openService('Queues')">Colas</div>45 </div>46 <div class="content" id="workspace">47 <!-- Las áreas de trabajo se agregarán aquí -->48 </div>49 50 <script>51 function openService(serviceName) {52 // Crear una nueva área de trabajo53 var pane = document.createElement("div");54 pane.className = "pane";55 pane.innerHTML = "<strong>" + serviceName + "</strong><p>Contenido de " + serviceName + "...</p>";56 document.getElementById("workspace").appendChild(pane);57 }58 </script>59 </body>60 </html>61 Enlace
El enlace para compartir es: