JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
    <title>bug</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <style>
        a { color: inherit; }
        .bug_box { margin: 5px; float: left; border: 5px double #eeeeff; }
        .bug_playground { height: 300px; width: 300px; background: #aaaacc; }
        .bug_problem { height: 150px; width: 150px; background: #ff0000; }
    </style>
</head>
<body>

    <div class="bug_box">
        <div class="bug_playground">
            <div id="bug01" style="height: 50%; width: 50%;" class="bug_problem">BUG 01</div>
        </div>
        <a href="#" onclick="$('#bug01').toggle('slide', 'slow');">Show / Hide</a>
        <p>Bug Ticket #7611</p>
    </div>
    
</body>
</html>