demo.css

body {
    background-color: darkslategrey;
}

small {
    display: block;
    margin: 2em;
    right: 0;
    left: 0;
    text-align: center;
    color: darkgrey;
    font-family: sans;
}

small a, small a:visited {
    color: darkgrey;
}


/* display */

.basicode {
    /* 4*3 aspect ratio */
    height: 36em;
    width: 48em;
    background-color: #333;
    border: 0.4em solid grey;
    outline: none;
    /* this centers the screen horizontally, for some reason */
    margin: auto;
    display: table;
    /* */
    margin-top: 1rem;
}

.basicode:focus {
    border: 0.4em solid black;
}


/* Tabbed example */
/* https://www.w3.org/Style/Examples/007/target.en.html#tab3 */
div.tabs {
    height: 41em;
    width: 58em;
    position: relative;
    z-index: 0;
    margin: auto;
    display: table;

}
div.tabs > div {
    display: inline;
}
div.tabs > div > a {
    font-family: sans;
    text-decoration: none;
    color: black;
    padding: 0.2em 2em 0.2em 2em;
    margin: 0;
    background: lightgrey;
    border-bottom: 1px solid lightgrey;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
}
/* inactive tabs */
div.tabs > div:not(:target) > a {
    border-bottom: 0;
    background: darkgrey;
}
/* active or default tab */
div.tabs > div:target > a {
    background: lightgrey;
    border-bottom: 1px solid lightgrey;
}
div.tabs > div > div {
    background: lightgrey;
    border: 1px solid lightgrey;
    z-index: -2;
    left: 0;
    top: 1.3em;
    bottom: 0;
    right: 0;
    padding: 0.3em;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    border-top-right-radius: 0.5em;
    position: absolute;
}
div.tabs > div:target > div {
    z-index: -1
}