JSFiddle - React, Tailwind, and code Playground

Full Page Tabs

by Jennifer Perrin

HTML

<input type="radio" name="r" id="radio1" checked="" />
<input type="radio" name="r" id="radio2" />
<input type="radio" name="r" id="radio3" />
<input type="radio" name="r" id="radio4" />
<input type="radio" name="r" id="radio5"  />
<div id="wrapper">
    <div class="content c1">TAB ONE</div>
    <div class="content c2">TAB TWO</div>
    <div class="content c3">TAB THREE</div>
    <div class="content c4">TAB FOUR</div>
    <div class="content c5">TAB FIVE</div>
</div>
<div id="tabs">
    <div class="one tabs"><label for="radio1"><div class="lbl">One</div></label></div>
    <div class="two tabs"><label for="radio2"><div class="lbl">Two</div></label></div>
    <div class="three tabs"><label for="radio3"><div class="lbl">Three</div></label></div>
    <div class="four tabs"><label for="radio4"><div class="lbl">Four</div></label></div>
    <div class="five tabs"><label for="radio5"><div class="lbl">Five</div></label></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Poiret+One);
body,html { 
    margin:0; 
    padding:0; 
    overflow:hidden; 
}
* { 
    margin:0; 
    padding:0; 
}
#tabs { 
    position:fixed; 
    width:100%; 
    bottom:0; 
    border-top:1px solid #330000; 
    box-shadow:2px 2px 2px 2px rgba(0,0,0,0.4);
}
.tabs { 
    width:20%; 
    text-align:center; 
    height:35px; 
    line-height:45px; 
    float:left; 
    margin:0; 
    padding-bottom:.5em;
    font-weight:bold; 
    font-size:1.5vw; 
    background:#DCCAA4; 
    color:#FFFFFF; 
    font-family: 'Poiret One', cursive;
}
.tabs:after { 
    content:''; 
    position:absolute; 
    background:#990000;  
    width:20px; 
    height:20px; 
    top:-11px; 
    margin-left:-10px;  
    transform:rotate(45deg); 
    opacity:0; 
    border-top:1px solid #330000; 
    border-left:1px solid #330000; 
}
.tabs:hover { 
    background:#990000;
}
.lbl { 
    height:35px; width:100%; 
    cursor:pointer; 
    text-align:center; 
}
label { 
    margin:0; 
    padding:0; 
}
input[type="radio"] { 
    display:none; 
}
#radio1:checked ~ #tabs .one { 
    background:#990000; 
}
#radio1:checked ~ #tabs .one:after { 
    opacity:1; 
}
#radio2:checked ~ #tabs .two { 
    background:#990000;
}
#radio2:checked ~ #tabs .two:after { 
    opacity:1; 
}
#radio3:checked ~ #tabs .three{ 
    background:#990000; 
}
#radio3:checked ~ #tabs .three:after { 
    opacity:1; 
}
#radio4:checked ~ #tabs .four{ 
    background:#990000; 
}
#radio4:checked ~ #tabs .four:after { 
    opacity:1; 
}
#radio5:checked ~ #tabs .five { 
    background:#990000; 
}
#radio5:checked ~ #tabs .five:after { 
    opacity:1; 
}
.content { 
    height:100vh; 
    width:100vw; 
    margin:0; 
    padding:0; 
    line-height:30vw; 
    font-family: 'Poiret One', cursive;
    font-size:10vw; 
    font-weight:bold; 
    color:white; 
    text-align:center; 
    text-shadow:0 0 1px black,0 0 2px black,0 0 5px black; 
}
.c1 { background:#283B1F; }
.c2 {...