JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
        <title>Sandbox</title>y
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
            * {
                margin: 0;
                padding: 0;
            }
            body {
                background-color: #fff;
                font: 16px Helvetica, Arial;
                color: #000;
            }
            dt {
                background-color: #ccc;
            }
            dd {
                height: 100px;
            }
            #footer {
                background-color: #ff9;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <dl> <dt>Handle</dt> 
            <dd id="1">Content</dd> <dt>Handle</dt> 
            <dd id="2">Content</dd> <dt>Handle</dt> 
            <dd id="3">Content</dd> <dt>Handle</dt> 
            <dd id="4">Content</dd>
        </dl>
        <div id="footer">Some more content</div>
    </body>

</html>

CSS

#accordion .handle {
    width: 260px;
    height: 30px;
    background-color: orange;
}
#accordion .section {
    width: 260px;
    height: 445px;
    background-color: #a9a9a9;
    overflow: hidden;
    position: relative;
}

JavaScript

$.fn.accordion = function () {
        return this.each(function () {
            $container = $(this);

            // Hijack handles.
            $container.find("dt").each(function () {
                var $header = $(this);
                var $selected = $header.next();

                $header.click(function () {
                    if ($selected.is(":visible")) {
                        $selected.animate({
                            height: 0
                        }, {
                            duration: 300,
                            complete: function () {
                                $(this).hide();
                            }
                        });
                    } else {
                        $unselected = $container.find("dd:visible");
                        $selected.show();
                        var newHeight = heights[$selected.attr("id")];
                        var oldHeight = heights[$unselected.attr("id")];

                        $('<div>').animate({
                            height: 1
                        }, {
                            duration: 300,
                            step: function (now) {
                                var stepSelectedHeight = Math.round(newHeight * now);
                                $selected.height(stepSelectedHeight);
                                $unselected.height(oldHeight + Math.round((newHeight - oldHeight) * now) - Math.round(newHeight * now));
                            },
                            complete: function () {
                                $unselected.hide()
                                    .css({
                                    height: 0
                                });
                            }
                        });
                    }
                    return false;
                });
            });

            // Iterate over panels, save heights, hide all.
            var heights = new Object();
           ...