JSFiddle - React, Tailwind, and code Playground

by magikMaker

HTML

<header class="top-header">
    top header
</header>
<div class="content">
<iframe src="http://provaz.nl/" frameborder="0"></iframe>
</div>

CSS

:root {
    --top-header-background-color: rgba(100, 0, 0, 0.8);
    --top-header-height: 60px;
}
body,
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: inherit;
}

.top-header {
    background-color: var(--top-header-background-color);
    box-shadow: 0 2px 6px 0 rgba(0,0,0,.3);
    height: var(--top-header-height);
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

.content {
    margin-top: var(--top-header-height);
}

iframe {
    border: 0;
    display: block;
    height: 100%;
    min-width: 100px;
    width: 100%;
}