JSFiddle - React, Tailwind, and code Playground

by aeonbeat

HTML

<link rel="stylesheet" href="http://rawk.aeonbeat.com/css/style.css">
<section class='dashboard'>
    <nav>
        <ul>
            <li>
                <a href=''>dashboard</a>
            </li>
            <li>
                <a href=''>hyperfront</a>
            </li>
            <li>
                <a href=''>antenna</a>
            </li>
        </ul>
    </nav>
</section>

SCSS

body { 
    background: url(http://rawknroll.new/img/sprite/bgr_container.png);
    background-size: auto;
}

// Mixins

@mixin button {
    @include background(linear-gradient(darken(#fff, 15), #fff));
    @include border-bottom-radius;
    @include box-shadow(darken(#fff, 15) 0 3px 0 0, fade-out($font-color, 0.8) 0 4px 0 1px);
    @include text-shadow(#fff 0 -1px 1px);
}

// Sprites

.dashboard {
    float: none;
    width: 360px;
    margin: 0 auto;
    nav {
        @include border-bottom-radius(6px);
        @include box-shadow(fade-out($font-color, 0.55) 0 0 0 1px , fade-out(#fff, 0.7) 0 0 0 2px);
        float: right;
        border-right: 7px solid fade-out($font-color, 0.8);
        border-bottom: 10px solid fade-out($font-color, 0.8);
        border-left: 7px solid fade-out($font-color, 0.8);
        padding: 0;
        ul {
            @extend .clearfix;
            @include button;
            width: 342px;
            height: 48px;
            overflow: hidden;
            &:hover li:first-child {
                background: none;
                a {
                    width: 1px;
                }
            }
        }
        li {
            @include box-shadow(fade-out($font-color, 0.8) -1px 0 0 0);
            float: left;
            overflow: hidden;
            border-left: 1px solid #fff;
            &:hover {
                background: darken(#fff, 5);
                a {
                    width: 188px;
                }
            }
            &:first-child {
                @include border-bottom-left-radius;
                border: none;
                box-shadow: none;
                background: darken(#fff, 5);
                &:hover a {
                    width: 188px !important;
                }
                a {
                    width: 188px;
                }
            }
               &:last-child {
                   @include border-bottom-right-radius;
                   float: right;
            }
          ...