JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<script src="http://tympanus.net/Tutorials/YouTubeLeftSideMenu/js/modernizr.custom.js"></script>
<nav class="dr-menu">
    <div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a class="dr-label">Account</a>

    </div>
    <ul>
        <li><a class="dr-icon dr-icon-user" href="#">Jason Quinn</a>

        </li>
        <li><a class="dr-icon dr-icon-camera" href="#">Videos</a>

        </li>
        <li><a class="dr-icon dr-icon-heart" href="#">Favorites</a>

        </li>
        <li><a class="dr-icon dr-icon-bullhorn" href="#">Subscriptions</a>

        </li>
        <li><a class="dr-icon dr-icon-download" href="#">Downloads</a>

        </li>
        <li><a class="dr-icon dr-icon-settings" href="#">Settings</a>

        </li>
        <li><a class="dr-icon dr-icon-switch" href="#">Logout</a>

        </li>
    </ul>
</nav>
<script>
    /**
     * ytmenu.js v1.0.0
     * http://www.codrops.com
     *
     * Licensed under the MIT license.
     * http://www.opensource.org/licenses/mit-license.php
     * 
     * Copyright 2013, Codrops
     * http://www.codrops.com
     */
    var YTMenu = (function() {

        function init() {

            [].slice.call(document.querySelectorAll('.dr-menu')).forEach(function(el, i) {

                var trigger = el.querySelector('div.dr-trigger'),
                    icon = trigger.querySelector('span.dr-icon-menu'),
                    open = false;

                trigger.addEventListener('click', function(event) {
                    if (!open) {
                        el.className += ' dr-menu-open';
                        open = true;
                    }
                }, false);

                icon.addEventListener('click', function(event) {
                    if (open) {
                        event.stopPropagation();
                        open = false;
                        el.className = el.className.replace(/\bdr-menu-open\b/, '');
                        return false;
                   ...

CSS

body {
    background: #91cfa1;
}
@font-face {
    font-family:'icomoon';
    src:url('http://tympanus.net/Tutorials/YouTubeLeftSideMenu/fonts/icomoon.eot');
    src:url('http://tympanus.net/Tutorials/YouTubeLeftSideMenu/fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('http://tympanus.net/Tutorials/YouTubeLeftSideMenu/fonts/icomoon.woff') format('woff'), url('http://tympanus.net/Tutorials/YouTubeLeftSideMenu/fonts/icomoon.ttf') format('truetype'), url('http://tympanus.net/Tutorials/YouTubeLeftSideMenu/fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.dr-menu {
    width: 100%;
    max-width: 400px;
    min-width: 300px;
    position: relative;
    font-size: 1.3em;
    line-height: 2.5;
    font-weight: 400;
    color: #fff;
    padding-top: 2em;
}
.dr-menu > div {
    cursor: pointer;
    position: absolute;
    width: 100%;
    z-index: 100;
}
.dr-menu > div .dr-icon {
    top: 0;
    left: 0;
    position: absolute;
    font-size: 150%;
    line-height: 1.6;
    padding: 0 10px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.dr-menu.dr-menu-open > div .dr-icon {
    color: #60a773;
    left: 100%;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}
.dr-menu > div .dr-icon:after {
    content:"\e008";
    position: absolute;
    font-size: 50%;
    line-height: 3.25;
    left: -10%;
    opacity: 0;
}
.dr-menu.dr-menu-open > div .dr-icon:after {
    opacity: 1;
}
.dr-menu > div .dr-label {
    padding-left: 3em;
    position: relative;
    display: block;
    color: #60a773;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 2.75;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.dr-menu.dr-menu-open > div .dr-label {
   ...