JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dynamicPanel">
                            <div class="dynPanelContent">
                                <div class="dynPanelOpener">:.</div>
                                <div class="dynPanelTitle">The first sample text</div>
                                Some sample text so that it doesn't look entirely strange and unrealistic. Please change me so that I may live long and prosper.</div>
                            <div class="dynPanelContent">
                                <div class="dynPanelOpener">:.</div>
                                <div class="dynPanelTitle">The first sample text</div>
                                Some sample text so that it doesn't look entirely strange and unrealistic. Please change me so that I may live long and prosper.</div>
                            <div class="dynPanelContent">
                                <div class="dynPanelOpener">:.</div>
                                <div class="dynPanelTitle">The first sample text</div>
                                Some sample text so that it doesn't look entirely strange and unrealistic. Please change me so that I may live long and prosper.</div>
                            <div class="dynPanelContent">
                                <div class="dynPanelOpener">:.</div>
                                <div class="dynPanelTitle">The first sample text</div>
                                Some sample text so that it doesn't look entirely strange and unrealistic. Please change me so that I may live long and prosper.</div>
                            <div class="dynPanelContent">
                                <div class="dynPanelOpener">:.</div>
                                <div class="dynPanelTitle">The fifth sample text</div>
                                Some sample text so that it doesn't look entirely strange and unrealistic. Please change me so that I may live long and prosper.</div>
                        </div>
                        <div...

CSS

.dynamicPanel {
    width:100%;
    height:520px;
    overflow:hidden;
    }
.dynPanelOpener {
    background-color: #CCCCCC;
    color: #E9F2FC;
    float: left;
    font-size: 11px;
    padding: 5px;
}
.dynPanelTitle {
    background-color: #666666;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: bold;
    padding: 5px;
    text-transform: uppercase;
}
.dynPanelContent {
    background-color:#BBBBBB;
    display:block;
    font-size: 12px;
    margin:0;
    padding: 5px;
    color: #000000;
    font-family: verdana,arial,"ms sans serif",sans-serif;
    min-height:120px;
}

JavaScript

$.fn.rotateEach = function(opts) {
    var $this = $(this),
        defaults, settings, fnRotator, fnHeight;

    defaults = {
        //how often we trigger the transition
        delay: 2000,
        element: ':first-child',
        elements: 'all',

        //how many times we rotate before we stop. Negatives mean it won't ever stop
        rotate: -1,

        //how many times we've rotated
        rotated: 0,

        //the time it takes for the animations to complete
        speed: 500,

        //used to stop animating
        timer: null,

        //negative number means that it won't ever stop rotating
        timeout: -1
    };

    settings = $.extend(defaults, opts);

    fnRotator = function($elem) {
        $elem.css('min-height', '0px')
        $elem.slideUp(settings.speed, function() {
            $elem.appendTo($elem.parent()).fadeIn(function(){
                //cannot be combined in the if below because we want it to count
                //regardless of whether we are only rotating X times.
                settings.rotated++;
                
                if (settings.rotate >= 0 && settings.rotated >= settings.rotate) {
                    $elem.css('min-height', '120px')
                    clearInterval(settings.timer);
                }
            });
        });
        
    };

    fnHeight = function($this) {
        var $elem = $this.find(settings.element);

        //we can't use the settings.element selector to do the calc, because it defaults to :first-child
        //we have to run the count on the type of whatever the :first-child is.
        return $elem.outerHeight(true) * ($this.find($elem[0].nodeName).length - settings.elements);
    };



    //grabs the height of the container to perserve it.  Adjusts for the proper number of elements.
    //if you specify more elements than you have, it will give you extra height.  Not sure what you 
    //want to do there.
    $this.height($this.height() - (settings.elements=='all' ||...