JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<topbar class="yup"><logo>800kiwis</logo><accountlink> My Account</accountlink></topbar>
<topbar><logo>800kiwis</logo></topbar>
<topbar><logo>800kiwis</logo></topbar>
<topbar><logo>800kiwis</logo></topbar>
<topbar><logo>800kiwis</logo></topbar>
<topbar><logo>800kiwis</logo></topbar>



<!--font-family: 'Patrick Hand', cursive;
font-family: 'Sue Ellen Francisco', cursive;
font-family: 'Give You Glory', cursive;
font-family: 'Neucha', cursive;
font-family: 'La Belle Aurore', cursive;
font-family: 'Swanky and Moo Moo', cursive;
font-family: 'Waiting for the Sunrise', cursive;
font-family: 'Schoolbell', cursive;
font-family: 'Shadows Into Light', cursive;
font-family: 'Gloria Hallelujah', cursive;
font-family: 'Annie Use Your Telescope', cursive;
font-family: 'Shadows Into Light Two', cursive;
font-family: 'Covered By Your Grace', cursive;-->

CSS

@import url(http://fonts.googleapis.com/css?family=Patrick+Hand|Sue+Ellen+Francisco|Give+You+Glory|Neucha|La+Belle+Aurore|Swanky+and+Moo+Moo|Waiting+for+the+Sunrise|Schoolbell|Shadows+Into+Light|Gloria+Hallelujah|Annie+Use+Your+Telescope|Shadows+Into+Light+Two|Covered+By+Your+Grace);

body {
    background-color: #fffbef;
    padding-top: 50px;
}


topbar {
    box-sizing: border-box;
    position: fixed; top: 0;
    width: 100%;
    padding: 3px 12px;
    background: rgb(167,145,67);
background: -moz-linear-gradient(top,  rgba(167,145,67,1) 0%, rgba(140,119,58,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,145,67,1)), color-stop(100%,rgba(140,119,58,1)));
background: url(http://noisepng.com/115-100-5.png), -webkit-linear-gradient(top,  rgba(167,145,67,1) 0%,rgba(140,119,58,1) 100%);
background: -o-linear-gradient(top,  rgba(167,145,67,1) 0%,rgba(140,119,58,1) 100%);
background: -ms-linear-gradient(top,  rgba(167,145,67,1) 0%,rgba(140,119,58,1) 100%);
background: linear-gradient(top,  rgba(167,145,67,1) 0%,rgba(140,119,58,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a79143', endColorstr='#8c773a',GradientType=0 );
        background: #F16251;
    margin-bottom: 10px;
    box-shadow:
                inset 0 1px 2px rgba(255,255,255,0.3),
                inset 0 -1px 2px rgba(0,0,0,0.3);
}

topbar:not(.yup) {
    display: none;
}

topbar logo {
    display: inline;
    font-size: 28px;
    color: rgba(255,255,255,1);
 text-shadow: 1px 0 1px rgba(0,0,0,0.45);
}

accountlink {
    float: right;
    line-height: 34px;
    font-size: 13px;
    color: white;
    font-family: "lucida grande";
     text-shadow: 1px 0 1px rgba(0,0,0,0.45);
 
}



topbar:first-of-type logo {
    font-family: 'Covered By Your Grace', cursive;
}

topbar:nth-of-type(2) logo {
font-family: 'Waiting for the Sunrise', cursive;
}

topbar:nth-of-type(3) logo {
font-family: 'Schoolbell', cursive;
}

topbar:nth-of-type(4)...