JSFiddle - React, Tailwind, and code Playground

HTML

<nav role="navigation">
    <span>+</span>
    <ul>
        <li class="active"><a href="#">Alle</a></li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Comedy</a></li>
        <li><a href="#">Romance</a></li>
        <li><a href="#">Erotic</a></li>
    </ul>
    <a href="#tv" class="tv">
        <span class="skew left"></span>
        <span class="skew right"></span>
        <strong>TV</strong>
    </a>
    <a href="#video" class="video">
        <span class="skew left"></span>
        <span class="skew right"></span>
        <strong>Videothek</strong>
    </a>
    
</nav>

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

body {
    font-family: 'Droid Sans', sans-serif;
}

nav {
    position: relative;
    background: #3ed5ff;
    height: 55px;
    overflow: hidden;
    text-align: center;
    width: 1150px;
    margin: 0 auto;
}

nav a {
    text-decoration: none;
}

nav > a {
    position: absolute;
    top:0;
    height: 100%;
    width: 37%;
    background: #000;
    display: block;
    left: 10%;
    color: #fff;
    -webkit-transition: all 200ms 300ms ease-out;
}

nav > span {
    display: block;
    -webkit-transition: all 150ms ease-out;
    -webkit-transform: rotate(0deg);
}

nav:hover > span {
    -webkit-transform: rotate(-45deg);
}

nav:hover > a {
    width: 22%;
}


nav > ul { 
    width: 80%;
    text-align: center;
    margin: -17px auto 0;
    opacity: 0;
}

nav:hover > ul {
    -webkit-transition: all 200ms 500ms ease-out;
    opacity: 1;
}

nav > ul li {
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    padding: 20px 5px;
}

nav > ul li a {
    color: #000;
    text-transform: uppercase;
}

a.video {
    background: #242424;
    right:10%; left: auto;
}

nav > a > strong {
    z-index: 1;
    position: relative;
    display: inline-block;
    padding: 16px 20px;
    font-size: 20px;

}

a.tv {
    text-align: right;
}

.skew {
    position: absolute;
    display: block;
    -wenkit-transform-origin: center center;
     width: 50px; height: 150%;
}

a.tv .skew {
    background: #000;
    -webkit-transform: rotate(-40deg);
}

a.tv .skew.left {
    top: 3px;
    left: -35px;
    -webkit-transform: rotate(40deg);
}

a.tv .skew.right {
    top: 3px;
    right: -35px;
}

a.video {
    text-align: left;
}

a.video .skew {
    background: #242424;
    -webkit-transform: rotate(40deg);
}

a.video .skew.left {
    top: 3px;
    left: -35px;
}

a.video .skew.right {
    top: 3px;
    right: -35px;
    -webkit-transform: rotate(-40deg);
}