JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<section>
    <ul>
        <li id="show-article">
            <a href="#article">Article</a>
        </li>
        <li id="show-comments">
            <a href="#article">Comments</a>
        </li>
   </ul>
    <div id="article"></div>
    <div id="comments"></div>
</section>

CSS

* { margin: 0; padding: 0; }

html { 
    font-size: 100%;
    background: #66CCFF;
}

body { 
    margin: 3em auto;
    max-width: 600px;
    width: 90%;
    font: 100%/1.5 sans-serif;
}

ul { 
    list-style: none; 
}

li { 
    display: block;
    width: 49%;
    text-align: center;
}

#show-article { 
    float: left;
}

#show-comments { 
    float: right;
    background: rgba(0,0,0,.3);
}

a { 
    color: #000;
    display: block;
    padding: .5em 0;
    text-decoration: none;
}

section { 
    max-width: 600px;
    background: rgba(0,0,0,.3);
    padding: 1.5em;
}

#article, #comments { 
    height: 200px;
    background: rgba(255,255,255,.9);
}
    
#comments { 
    display: none;
}