JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<div id="logoBlock" class= "grid_4">
            <img width=200px src="../img/IshiharaPlate3.svg" alt="Logo" />
        </div>

            <div id="navigation" class="grid_8 omega">
                <ul id="navList">
                    <li>
                        <div class="round-button"><div class="round-button-circle">
                            <a  class= "round-button" href="../html/MichaelHomePage.html" id="homeNav">Home</a>
                        </div></div>
                    </li>
                    <li>
                        <div class="round-button"><div class="round-button-circle" >
                            <a  class= "round-button" href="../html/gamesPage.html" id="gamesNav">Games</a>
                        </div></div>
                    </li>
                    <li>
                        <div class="round-button"><div class="round-button-circle">
                            <a  class= "round-button" href="../html/resumePage.html" id="resumeNav">Resume</a>
                        </div></div>
                    </li>
                    <li>
                        <div class="round-button"><div class="round-button-circle">
                            <a  class= "round-button" href="../html/contactPage.html" id="contactNav">Contact</a>
                        </div></div>
                    </li>                   
                </ul>
            </div>  
     <div id="block1" class="grid_10">

    <section class="tabs">
            <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
            <label for="tab-1" class="tab-label-1">About</label>

            <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
            <label for="tab-2" class="tab-label-2">Services</label>

            <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
            <label for="tab-3" class="tab-label-3">Work</label>

            <input id="tab-4"...

CSS

/*global*/
    body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 1.125em;
color: #faf3bc;
background: #420600;
    }

    a {
color: #4fb69f;
text-decoration: none;
    }



    /*typography*/

    h1 {
font-size: 1.750em;
font-weight: 100;
letter-spacing: -1.5px;
    }

    h2 {
font-weight: 100;
font-size: 1.500em;
font-size: 2.5vw;
color: #b4c34f;
    }
    h3 {
font-weight: 100;
font-size: 1.125em;
color: #ed6c85;
    }


    #logoBlock{
    position: relative;
margin: 0;
padding-top: 1%;
padding-bottom: 1%;
top: 0;
background-color: #420600;  
width: 100%;
height: 15%; 
    }

    #logoBlock h1 {
color: #FFF;
text-align: center;
top: 20px;
    }

    #logoBlock img {
width: 20%;
height: 20%;
    }

    #navigation{
position: relative;
width: 80%;
height: 15%;
left: 10%;
background-color: #008080;
    }

    #navigation ul{
list-style-type:none;
margin: 0 auto;
width: 100%;
height: 25%;
margin-left: 16%;

    }

    #navigation li {
display:inline;
float: left;
padding: 2%;
    }

    .round-button {
width:85%;
    }
    .round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
    border-radius: 50%;
border:10px solid #ff8080;
    overflow:hidden;

    background: #c83737; 
    box-shadow: 0 0 3px gray;
    }
    .round-button-circle:hover {
background:#30588e;
    }
    .round-button a {
    display:block;
float:left;
width:100%;
padding-top:50%;
    padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;

text-align:center;
color:#F5F5DC;
    font-family:Verdana;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
    }

    #block1 {
position: relative;
height: 50%;
width: 100%;
    }

    #block1  h1 {
height: 2%;
width: 2%;
left: 5%;
color: #FFF
    }

    #sizzle {
position: relative;
left: 30%;
top:-10%;
    }
    .tabs {
    position: relative;
margin: 40px auto;
width: 750px;
    }

    .tabs input {
position: absolute;
z-index: 1000;
width: 120px;
height: 40px;
left: 0px;
top: 0px;
opacity: 0;
   ...