JSFiddle - React, Tailwind, and code Playground

by Nathan Johnson

HTML

<div id="header">
    <div id="header-content">
        <h1>Here is some heading text :)</h1>
        <p>Here is some more content of the header...</p>
    </div>
</div>
<p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p><p>Some text can be here here.</p>

CSS

body {
    font-family: arial, sans-serif;
    padding: 0;
    margin: 0;
}
#header {
    background-color: black;
    /*Opacity start*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    /*Opacity end*/
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    padding: 0;
    margin: 0;
}
#header #header-content {
    margin: 10px;
}