JSFiddle - React, Tailwind, and code Playground

by Admiral Potato

HTML

<ul id="actionBar">
		<li><a class="home" href="home.html"><span>home</span></a></li>
		<li><a class="search" href="search.html"><span>search</span></a></li>
		<li><a class="config" href="config.html"><span>config</span></a></li>
		<li><a class="logout" href="logout.html"><span>logout</span></a></li>
	</ul>

SCSS

body{
    font-family: sans-serif;
}
* {
    padding: 0;
    margin: 0;
}


ul{
    padding: 48px;
    li{
        display: block;
        float: left;
        padding: 2px;
        a{
            display: block;
            width: 96px;
            height: 96px;
                background-color: #ccf;
            span{
                display: block;
                padding: 4px;
            }
            &:hover{
                background-color: #cff;
            }
        }
    }
}