JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<div id="bg_container">
    <iframe id="bg" src="//www.youtube.com/embed/wO_xhHf-OgM?wmode=opaque&amp;autoplay=1&amp;rel=0&amp;controls=0&amp;showinfo=0&amp;vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>
<div id="content">
    <nav>
        <ul>
            <a href="somesite.com"><img class="logo" src="https://chillix.files.wordpress.com/2009/10/android-logo-small.gif" alt="android" /></a>
        </ul>
        <ul>
            <li>
                <a href="http://blue-dove.org/products/start-up-collection/all">All</a>
            </li>
            <li>
                <a href="http://blue-dove.org/products/start-up-collection/men">Men</a>
            </li>
            <li>
                <a href="http://blue-dove.org/products/start-up-collection/women">Women</a>
            </li>
        </ul>
    </nav>
</div>

CSS

#bg_container {
    height:700px;
    overflow:visible;
    z-index:0;
}
#bg {
    width:100%;
    height:1200px;
    position: fixed;
    top: -50%;
}
#content {
    position:absolute;
    top:0px;
    padding:30px;
    color:#FFF;
    text-shadow:#000 2px 2px;
    z-index:1;
}
.transparent {
    background-color:rgba(0, 0, 0, 0.8);
    position: relative;
    z-index:10;
}
nav {
    background-color:rgba(255, 255, 255, 0.5);
    position: relative;
}
ul {
    display: inline-block;
}
.logo {
    height:30px;
}