JSFiddle - React, Tailwind, and code Playground

by hteumeuleu

HTML

<a href="#popup" id="button">Ceci n'est pas un bouton</a>
<div id="popup">
Warning: If you are reading this then this warning is for you. Every word you read of this useless fine print is another second off your life. Don't you have other things to do? Is your life so empty that you honestly can't think of a better way to spend these moments? Or are you so impressed with authority that you give respect and credence to all that claim it? Do you read everything you're supposed to read? Do you think every thing you're supposed to think? Buy what you're told to want? Get out of your apartment. Meet a member of the opposite sex. Stop the excessive shopping and masturbation. Quit your job. Start a fight. Prove you're alive. If you don't claim your humanity you will become a statistic. You have been warned- Tyler. 
</div>

CSS

body { font:1.1em sans-serif; } 
#popup { display:none; margin:20px; padding:20px 15px; background:#fff; border-radius:5px; box-shadow:0 0 0 3px rgba(0,0,0,0.1); } 

#popup[style*="block"] { -moz-animation:slideInFromTop linear 1s; -webkit-animation:slideInFromTop linear 1s; -ms-animation:slideInFromTop linear 1s; animation:slideInFromTop linear 1s; }

#popup[style*="none"] { display:block !important; -webkit-animation:fadeOut linear 1s; -webkit-animation-fill-mode:forwards; }

@-webkit-keyframes fadeOut {
    0% { display:block !important; opacity:1; }
    100% { display:none !important; opacity:0; }
}

@-webkit-keyframes slideInFromTop {
    0% { -webkit-transform:translateY(-600px); opacity:0; }
    80% { -webkit-transform:translateY(20px); }
    85% { -webkit-transform:translateY(-20px); opacity:1; }
    90% { -webkit-transform:translateY(10px); }
    95% { -webkit-transform:translateY(-10px); }
    100% { -webkit-transform:translateY(0px); }
}

@-moz-keyframes slideInFromTop {
    0% { -moz-transform:translateY(-600px); }
    80% { -moz-transform:translateY(20px); }
    85% { -moz-transform:translateY(-20px); }
    90% { -moz-transform:translateY(10px); }
    95% { -moz-transform:translateY(-10px); }
    100% { -moz-transform:translateY(0px); }
}

@-ms-keyframes slideInFromTop {
    0% { -ms-transform:translateY(-600px); }
    80% { -ms-transform:translateY(20px); }
    85% { -ms-transform:translateY(-20px); }
    90% { -ms-transform:translateY(10px); }
    95% { -ms-transform:translateY(-10px); }
    100% { -ms-transform:translateY(0px); }
}

@keyframes slideInFromTop {
    0%     { transform:translateY(-600px); }
    80% { transform:translateY(20px); }
    85% { transform:translateY(-20px); }
    90% { transform:translateY(10px); }
    95% { transform:translateY(-10px); }
    100% { transform:translateY(0px); }
}

JavaScript

$('#button').click(function() {
    $('#popup').toggle();        
});