JSFiddle - React, Tailwind, and code Playground

by jimmyt1001

HTML

<a href="#">Nav Link</a>

<div class="nav-container">

   <div id="games-display">
    
       <div class="column highlight">
       		<ul>
        		<li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
            </ul>
            
           <div class="featured">
            Featured Info
           </div>

       </div>
       
       <div class="column">
       		<div class="display-header">Column 2</div>
       		<ul>
        		<li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 5</a></li>
                <li><a href="">Link 6</a></li>
                <li><a href="">Link 7</a></li>
                <li><a href="">Link 8</a></li>
                
            </ul>
       </div>
       
       <div class="column">
       		<div class="display-header">Column 3</div>
                   		<ul>
        		<li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 5</a></li>
                <li><a href="">Link 6</a></li>
                <li><a href="">Link 7</a></li>
                <li><a href="">Link 8</a></li>
                
            </ul>
       </div>
       
       <div class="clear-fix"></div> <!-- Very dirty way of removing float property -->
    
   </div>

</div>

CSS

.nav-container {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}

div.column {
	border-left: 2px #dedede solid;
	width:156px;
	float:left;
	padding: 11px 25px 5px 11px;

}
div.column:nth-child(1)
{
border-left:none;
}



.column a {

	line-height:1.7em;

}

ul {
	color:#3173d4;
}

.column.highlight a {
	color:#3173d4;
	font-weight:bold;
	}


.clear-fix {
	clear:both;
}


#games-display {
	width:580px;
	height:273px;
	border-top: 6px #639df4 solid;
	border-right: 1px #639df4 solid;
	border-left: 1px #639df4 solid;
	border-bottom: 1px #639df4 solid;
	background-color:#fff;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	padding:10px;
	display:block;

}

.display-header {
	width:135px;
	height:5px;
	background-color:#f7f7f7;
	font-weight:bold;
	padding:8px 5px 15px 15px;
	border: 1px #c5c5c5 solid;
}

.featured {
	width:135px;
	height:125px;
	background-color:#f7f7f7;
	text-align:center;
	font-weight:bold;
	padding:12px;
	border: 1px #c5c5c5 solid;
	}