JSFiddle - React, Tailwind, and code Playground

by VanessaKing

HTML

<body style="background:#ccc;">
<div id="home-logo-container" style="background:#eee;">Click Here</div>
<div class="container-full">
  <div class="col-xs-6 home-first-half-page hidden-xs">
    <div id="content-bar"> <span class="expand-bar"></span> </div>
  </div>
  <div class="col-xs-6 home-second-half-page hidden-xs hidden-sm">
    <div style="display: none;" id="right-menu" class="col-xs-12">
      <div class="home-menu-container col-xs-6 col-xs-offset-3">
        <ul id="main-menu" class="home-menu">
          <li class="menu-item"><a href="#">TEST</a></li>
          <li class="menu-item"><a href="#">TEST02</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS

@charset "UTF-8";.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce}@-webkit-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes...

JavaScript

jQuery(function(e) {
    if (Constants.firstEntry && Constants.frontPage == "1") {
        var t = e("#right-menu");
        t.hide();
        t.find("li").each(function() {
        });
        e("#home-logo-container").click(function() {
            var n = e(this);
            if (!n.hasClass("clicked")) {
                t.show();
                t.addClass("animated slideInLeft");
                n.css("cursor", "default");
                n.addClass("clicked")
            }
        });
        t.bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(n) {
            e("#main-menu li").show();
        })
    }
})