JSFiddle - React, Tailwind, and code Playground

by Paul Panov

HTML

<div id="window">
    <div id="head">
        <span class="button" id="r"></span>
        <span class="button" id="y"></span>
        <span class="button" id="g"></span>
        <center>Graph</center>
    </div>
    <main><iframe src="https://box.paulll.cc/s/projects/VK_API/AdvancedLinks/clearWebGUI/main.html">Loading frame</iframe></main>
</div>

CSS

#window {
    border-radius: 3px;
    box-shadow: 0 0 3px 0 black;
    width: 1043px;
}

#head {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #1c1c1c;
    height: 32px;
    color: white;
    font-family: sans-serif;
    position: relative;
}

.button {
    display: inline-block;
    border-radius: 50%;
    height: 12px;
    width: 12px;
    margin: 10px 3px;
}

.button:first-child {
    margin-left: 12px;
}

#r {background: #EF534A}
#y {background: #EDC04A}
#g {background: #97D272}

main {
    background: url(https://temp.paulll.cc/screenshot-graph-1.png) no-repeat;
    margin-top: -10px;
    height: 702px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

iframe {width: 100%; height: 100%; background: white;}