JSFiddle - React, Tailwind, and code Playground

HTML

<div class="terminal">
    <div class="terminal--head">
      <div class="terminal--buttons"></div>
    </div>
    <div class="terminal--content">
        # We used <a href="https://highlightjs.org/">highlight.js</a> for the syntax highlighting of content in here.
        <br/>
        <br/>        
        # The CSS Only OS-X style Window on <a href="https://giantswarm.io/">Giant Swarm.</a>
        <br/>      
        <pre>        
   ____ _             _   ____                              
  / ___(_) __ _ _ __ | |_/ ___|_      ____ _ _ __ _ __ ___  
 | |  _| |/ _` | '_ \| __\___ \ \ /\ / / _` | '__| '_ ` _ \ 
 | |_| | | (_| | | | | |_ ___) \ V  V / (_| | |  | | | | | |
  \____|_|\__,_|_| |_|\__|____/ \_/\_/ \__,_|_|  |_| |_| |_|        
        </pre>
        Request an invite for Giant Swarm at <a href="https://giantswarm.io/request-invite/">https://giantswarm.io/request-invite/</a>!
    </div>
  </div>

CSS

.terminal {
    font-family: Inconsolata,Consolas,Menlo,Monaco,"Courier New",monospace;
    color: #ccc;
    background: #234a61;
    height: 300px;
    border-radius: 5px;
}

.terminal--head {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ECECEC), color-stop(1, #D3D3D3));
    background-image: -o-linear-gradient(bottom, #ECECEC 0%, #D3D3D3 100%);
    background-image: -moz-linear-gradient(bottom, #ECECEC 0%, #D3D3D3 100%);
    background-image: -webkit-linear-gradient(bottom, #ECECEC 0%, #D3D3D3 100%);
    background-image: -ms-linear-gradient(bottom, #ECECEC 0%, #D3D3D3 100%);
    background-image: linear-gradient(to bottom, #ECECEC 0%, #D3D3D3 100%);
    height: 23px;
    border-radius: 5px 5px 0 0;
    position: relative;
}

.terminal--buttons {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #FC615C;
    left: 10px;
    top: 5px;
    border: 1px solid #DF4744;
}

.terminal--buttons:after, .terminal--buttons:before  {
    display: block;
    position: absolute;
    content: "";
    left: 18px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #FDBF41;
    border: 1px solid #DE9F34;
    top: -1px;
}

.terminal--buttons:after {
    background: #33C748;
    left: 38px;
    border: 1px solid #27AA35;
}

.terminal--content {
    padding: 10px 20px;
}

.terminal--content a {
    color: #fff;
}

pre {
    padding: 0px;
}