JSFiddle - React, Tailwind, and code Playground

by victorrseloy

HTML

<div id="mainWrapper">
    <div id="header"> 
        <div id="logo" class="headerElements">
            text1
        </div>
        <div id="login" class="headerElements">
            text2
        </div>
        <div id="register" class="headerElements">
            text3
        </div>
        <div id="follow" class="headerElements">
            text4
        </div>
    </div>
</div>

CSS

*{
    margin:0;
    padding:0;
}

body,html {
    height: 100%;
    font-family: 'Quicksand', sans-serif;
}

div#mainWrapper {
    height: 100%;
    width: 100%;
    background: url(../images/women.jpg) no-repeat center center;
}

div#header {
    width: 100%;
    height: 5%;
    background: white;
    opacity: 0.5;
}

div.headerElements {
    float: left;
    height: 100%;
    width: 10%;
    text-align: center;
}

div.headerElements:hover {
    background: orangered;
    opacity: 0.5;
}

.headerText {
    font-size: x-large; 
}