JSFiddle - React, Tailwind, and code Playground

by _hags

HTML

<div class=b>
    <div class=c>
<div class=container>
    <a href="#" class=main>Instruments</a>
    <a href="#" class=left>bestsellers</a>
    <a href="#" class=right>top rated</a>
</div>

<div class=container>
    <a href="#" class=main>Effects</a>
    <a href="#" class=left>bestsellers</a>
    <a href="#" class=right>top rated</a>
</div>

<div class="container free">
    <a href="#" class=main>Free plugins</a>
    <a href="#" class=left>bestsellers</a>
    <a href="#" class=right>top rated</a>
</div>
    </div>
</div>

CSS

.b { background: #efefef; padding: 30px; }
.c { background: #fff; padding: 20px 0; overflow: hidden; width: 960px;  }

a { display: block; color: #fff; text-decoration: none; text-transform: uppercase; font-family: sans-serif; text-align: center;}

.container { width: 301px; overflow: show; float:left; margin-left: 0px; background: #34495E; border-left: 1px solid #44596E  }
.main { background: #34495E; color: #fff; height: 40px; line-height: 40px; font-size: 20px; text-transform: uppercase; }    
.left, .right { background: #2C3E50; width: 150px; height: 30px; line-height: 30px; font-size: 15px; }
.left { float: left; }
.right { float: right; }

/* .main:hover { background: #44596E; box-shadow: 0 0 10px 2px #34495E;  } */
.main:hover { background: #44596E; position: relative; /*top: 1px; left: 1px;*/ font-size: 22px; letter-spacing: 1px; }
/* .left:hover, .right:hover { background: #304457; box-shadow: 0px 0px 10px 2px #2C3E50; z-index:10 } */
.left:hover, .right:hover { background: #304457; position: relative; /*top: 1px; left: 1px;*/ font-size: 17px; letter-spacing: 1px;}

.container.free, .container.free .main { background: #3498DB; }
.container.free .left, .container.free .right { background: #2980B9 }
/*
.container.free .main:hover, .container.free .left:hover, .container.free .right:hover { background: #7F8C8D; }
*/