JSFiddle - React, Tailwind, and code Playground

by Patrick Hund

HTML

<header class="header">
    <div class="header-navbar">
        <nav class="header-nav">
            <ul class="header-main-nav">
                <li class="header-main-nav-item">
                    <a class="header-nav-link header-nav-dropdown-toggle" href="javascript:void(0)">
                        Suchen
                    </a>
                    <ul class="header-main-nav-dropdown">
                        <li>
                            <a href="javascript:void(0)">Autos</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">Fahrräder</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">UFOs</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</header>

CSS

*,
*:before,
*:after {
    box-sizing: border-box;
}
body {
    color: #333;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}

ol, ul {
    list-style-image: none;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

html {
    font-family: HelveticaNeue,"Helvetica Neue",HelveticaNeueRoman,"Helvetica Neue",Helvetica,"Trebuchet MS",Verdana,sans-serif;
    font-size: 14px;
    line-height: 16px;
}

.header {
    z-index: 5;
    background-color: #FFF;
    box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.5);
    font-family: Helvetica Neue,HelveticaNeue,Helvetica,Arial,sans-serif;
    font-weight: 300;
    font-size: 12px;
    background-position: center bottom;
    background-image: linear-gradient(to bottom, transparent 98px, rgba(0, 0, 0, 0.05) 98px, rgba(0, 0, 0, 0.05) 100px);
    position: relative;
    display: block;
}

.header-navbar {
    max-width: 1024px;
    position: relative;
    padding: 0px 24px;
    margin: 0px auto;
    height: 60px;
}

.header-nav {
    position: static;
    float: right;
    width: auto;
    overflow: auto;
    top: 0px;
    right: -260px;
    bottom: 0px;
    z-index: 400;
    background-color: #FFF;
    transition: right 0.2s ease-out 0s;
}

.header-main-nav {
    float: right;
    border-right: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    display: block;
    border: medium none;
}

.header-main-nav-item {
    float: left;
    margin: 0px;
    border-top: medium none;
    display: block;
    line-height: 60px;
    border-width: 1px medium medium;
    border-style: solid none none;
    border-color: #D9D9D9 -moz-use-text-color -moz-use-text-color;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    font-family:...

JavaScript

$(".header-nav-dropdown-toggle").click(function () {
    $(this).siblings(".header-main-nav-dropdown").toggle();
});