JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <style type="text/css">
    *
    {
        margin:0;
        padding:0;
       font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

   
    
    .animate
    {
        -webkit-animation-name: animation;
        -webkit-animation-duration: 2s;
    }


    @-webkit-keyframes animation{
    0%{
    opacity:100;
    }
    100%
    {
    opacity:0;    
    }
    }


    </style>
    <script type="text/javascript">
    $(document).ready(function(){
    
    $("#script").click(function(){ 
     startAnimation(); 
    });
        
    $("#toggle").click(function(){
        $("#flash-message").toggleClass('animate');
        });
        
        
    
    function startAnimation()
    {
        if ($("#flash-message").hasClass('animate')==true)
        {
            $("#flash-message").removeClass('animate');    
            startAnimation();
        }
        else
        {
            $("#flash-message").addClass('animate');    
        }    
    }

        
    });
    </script>
</head>
<body>
            
 <div id="flash-message">flashing text</div>
 <br />
    <input type="button" id="script" name="script" value="script"/>
 <br />
    <input type="button" id="toggle" name="toggle" value="toggle"/>   
    </body>
</html>