JSFiddle - React, Tailwind, and code Playground

by Patrick Kershner

HTML

<div id="header">
    <div>
         <h1>This <span>shows</span> active <span>modules</span> and <span>nodes</span></h1>

         <h3>No javascript or jquery required</h3>

    </div>
    <br />
    <div id="nav">
        <ul>
            <li><a href="#">Home</a>

            </li>
            <li><a href="#">About</a>

            </li>
            <li><a href="#">Misc.</a>

            </li>
            <li><a href="#">Contact</a>

            </li>
        </ul>
    </div>
</div>
<div>&nbsp;</div>
<div class="container">
    <fieldset>
        <legend>Module 1</legend>
        <section class="thirdContainer">
            <div class="node">
                 <h3>Title</h3>

                <br />
                <p>Duis accumsan, ipsum vitae sodales fringilla, libero sapien vestibulum massa, ac rutrum turpis eros ornare mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ultricies velit nec orci vestibulum, non aliquam justo sagittis. Nam a lacinia massa. Nam ac ligula augue. Pellentesque condimentum, neque congue aliquet pellentesque, est arcu sagittis ante, in sollicitudin dui leo auctor mi. Nulla facilisi. Duis at lorem a elit facilisis consectetur non non sem. Ut tincidunt, nunc eget ultricies volutpat, risus turpis mattis leo, a semper nunc quam sed ligula. Etiam ut dui tellus. Aenean lacinia vitae tortor sit amet consequat. Cras nec sapien quam. Praesent sollicitudin metus nunc, ut consequat leo placerat a. Donec sagittis metus eget accumsan dapibus.</p>
            </div>
        </section>
        <section class="thirdContainer">
            <div class="node">
                 <h3>Title</h3>

                <br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar massa a consequat posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt turpis justo, quis ultricies turpis accumsan nec. Cras porta in nunc non ornare. Duis faucibus sed enim vitae...

CSS

* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
}
body {
    font-family:Verdana, Geneva, sans-serif;
    
}
.thirdContainer {
    float: left;
    display: inline-block;
    width: 33%;
    box-sizing: border-box;
    height: 200px;
    border:1px solid #d3d3d3;
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
    overflow: scroll;

}
.container {
    padding:5px;
    border:1px solid #FFF;
}
.container:hover {
    padding:5px;
    border:1px solid black;
}
fieldset {
    border:1px solid #d3d3d3;
}
fieldset:hover {
    border:1px solid #333;
}
#nav {
    text-align:center border-spacing:5px;
}
#nav ul {
    list-style-type:none;
    margin:0;
    padding:0px;
}
#nav li {
    display:inline;
    border:1px solid #09F;
    background:#09F;
    margin-left: 0;
    margin-right: 1%;
    margin-top: .5em;
    margin-bottom: .5em;
}
#nav li:hover {
    display:inline;
    border:1px solid #369;
    background:#369;
}
a {
    text-decoration:none;
    color:white;
}
.node {
    border:1px solid #096;
    color:#000;
}
.node:hover {
    border:1px solid #0000FF;
}
#header {
    color:#699;
    text-align:center;
}
#header span {
    color:#990000;
}
#header h3 {
    font-size:10px;
    color:#990000;
}
legend {
    color:#036;
}
#footer {
    text-align:center;
    font-size:small;
}
#footer span {
    color:#990000;
}
#footer span:hover {
    color:#000000;
}