JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://app-c9eaf7f4-113a-4126-9924-6da17df5d694.cleverapps.io/js/semantic.min.js"></script>
<link rel="stylesheet" href="http://app-c9eaf7f4-113a-4126-9924-6da17df5d694.cleverapps.io/css/semantic.css">
<link rel="stylesheet" href="http://app-c9eaf7f4-113a-4126-9924-6da17df5d694.cleverapps.io/css/tienda.css">
<body class="pushable">
    <!-- Sidebar Menu -->
    <div class="sidebar-trigger" style="display: block;"></div>
    <div class="ui left vertical sidebar labeled icon menu">
        <a class="item">
            <i class="home icon"></i>Club
        </a>
        <a class="item" href="/">
            <i class="block layout icon"></i> Tienda
        </a>
        <a class="item">
            <i class="smile icon"></i> Friends
        </a>
    </div>
    <!-- Page Contents -->
    <div class="pusher">
        <div class="ui inverted vertical masthead center aligned segment">
            <div class="ui container">
                <div class="ui large secondary inverted pointing menu">
                    <a class="toc item">
                        <i class="sidebar icon"></i>
                        <p>Menu</p>
                    </a>
                    <a class="ui image label">
                        <img src="img/luismi.png">Flipat LĂłpez</a>
                    <!--  <div class="right item">
                        <a class="ui inverted button">Entra</a>
                    </div> -->
                </div>
            </div>
            <div class="ui text container">
                <h1 class="ui inverted header">Mono Fastt</h1>
            </div>
        </div>
        <div class="ui inverted vertical footer segment">
            <div class="ui container">
                <div class="ui stackable inverted divided equal height stackable grid">
                    <div class="three wide column">
                        <h4 class="ui inverted header">About</h4>
                ...

JavaScript

$(document)
    .ready(function() {
        /********************************
        /*           GENERAL
        /********************************/

        // fix menu when passed
        $('.masthead')
            .visibility({
                once: false,
                onBottomPassed: function() {
                    $('.fixed.menu').transition('fade in');
                },
                onBottomPassedReverse: function() {
                    $('.fixed.menu').transition('fade out');
                }
            });

        // create sidebar and attach to menu open
        $('.ui.sidebar').sidebar('attach events', '.toc.item');
        // hover transparent div to trigger the sidebar too:
        $('.sidebar-trigger').hover(function() {
            $('.ui.sidebar').sidebar('show')
        });
        // hide() and show() the sidebar-trigger accordingly to use the sidebar:
        $('.ui.sidebar').sidebar('setting', {
            onShow: function() {
                $('.sidebar-trigger').hide();
            },
            onHidden: function() {
                $('.sidebar-trigger').show();
                $('.sidebar-trigger').one('mouseover', function() {
                    $('.ui.sidebar').sidebar('show');
                    $('.sidebar-trigger').hide();
                });
            }
        });
        // $(document).on('transitionend', function(event) {
        //     // Evento sidebar escondida
        //     if (event.target === $('.pusher')[0] && event.target !== $('.pusher.dimmed')[0]) {
        //         console.log('mostrar');
        //         $('.sidebar-trigger').show();
        //     }
        // Evento sidebar desplegada
        // } else if (event.target === $('.pusher.dimmed')[0]) {
        //     console.log('anular');
        //     $('.sidebar-trigger').hide();
        // }
        // });

        /********************************
        /*           TIENDA
        /********************************/
        $('.ui.form...