<html>
<head>
<style>
:root{
--primary: white;
--secondary: grey;
--bg: black;
}
html{
background-color: var(--bg);
}
.container {
background-color: var(--bg);
color: var(--primary);
font-family: Orbitron;
}
.tab_group {
background-color: var(--bg);
display: flex;
justify-content: space-around;
}
.tab {
color: var(--secondary);
width: 100%;
text-align: center;
padding: 5px;
border-bottom: solid 1px var(--primary);
box-sizing: border-box;
height: 29px;
overflow: hidden;
white-space: nowrap;
}
.tab:hover{
color: var(--primary);
background-color: var(--bg);
border: 1px solid var(--primary);
border-bottom: none;
}
.terminal {
background-color: var(--bg);
height: 800px;
border: 1px solid var(--primary);
border-top: none;
display: none;
}
.terminal.active {
display: inherit;
}
</style>
</head>
<body>
<div class="container">
<div class="tab_group">
<div class="tab"><span>Desktop: bash</span></div>
<div class="tab"><span>website1: php</span></div>
<div class="tab"><span>terminal: node</span></div>
</div>
<div class="terminal active"></div>
<div class="terminal"></div>
<div class="terminal"></div>
</div>
</body>
</html>
