JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hp-sliderwrapper">
                <div class="main_image">
                    <img src="images/homepageslides/hhp.jpg" />
                    <div class="desc">
                        <div class="block">
                            <h5>Heavy Haul Platform Trailers</h5>
                            <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ligula eget nibh nas</h6>
                            <a href="#"><span></span><h6>LEARN MORE</h6></a>
                        </div>
                    </div>
                </div>
                <div id="hpnavshadow"></div>
                <div class="image_thumb">
                    <a href="#" id="next">next</a>
                    <ul>
                        <li>
                            <a href="images/homepageslides/hhp.jpg"><img src="images/homepageslides/hhp-thumb.jpg" /></a>
                            <div class="block">
                                <h5>Heavy Haul Platform Trailers</h5>
                                <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ligula eget nibh nas</h6>
                                <a href="#"><span></span>LEARN MORE</a>
                            </div>
                        </li>
                        <li>
                            <a href="images/homepageslides/hhc.jpg"><img src="images/homepageslides/hhc-thumb.jpg" /></a>
                            <div class="block">
                                <h5>Heavy Haul Conventional</h5>
                                <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ligula eget nibh nas</h6>
                                <a href="#"><span></span>LEARN MORE</a>
                            </div>
                        </li>
                        <li>
                            <a href="images/homepageslides/ps.jpg"><img src="images/homepageslides/ps-thumb.jpg" /></a>
                           <div class="block">
        ...

CSS

#hp-sliderwrapper {width:600px; height:310px; float:left; display:block; position:relative;}
.main_image { width:360px; height: 310px; float: left; background: #333; position: relative; overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/ color: #fff;}
.main_image h2 { font-size: 2em; font-weight: normal; margin: 0 0 5px; padding: 10px;}
.main_image p { font-size: 1.2em; line-height: 1.6em; padding: 10px; margin: 0;}
.main_image .desc{ position:absolute; top:50px; left:0; /*--Stick the desc class to the bottom of our main image container--*/ width: 180px; display: none; /*--Hide description by default, if js is enabled, we will show this--*/}
.main_image .desc .block{width: 100%; background:black; opacity:0.75; padding:20px; position:absolute;}
.main_image .desc .block h5{font-size:24px; color:#ff0000; text-shadow: 2px 2px 3px #000000; }
.main_image .desc .block h6 {font-size:14px; color:#fffff; text-shadow: 2px 2px 3px #000000;  font-weight:normal; }
.main_image .desc .block a{float:left; padding:10px 15px 10px 10px; background-image:url(../images/sitewide/hp-ctared.png); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-top:10px; text-decoration:none;  font-size:14px; line-height:120%; font-family: 'Francois One', sans-serif; color:#fff;}
.main_image .desc .block a:hover{float:left; padding:10px 15px 10px 10px; background-image:url(../images/sitewide/hp-ctadarkred.png);}
.main_image .desc .block a span {width:19px; height:19px; display:block; float:left; background-image:url(../images/sitewide/hp-ctaredarrow.png); margin:0 10px 0 0;}
.main_image .desc .block a h6 {color:#ffffff; text-shadow: 1px 1px 3px #540000; font-size:14px; display:block; font-family: 'Francois One', sans-serif; text-decoration:none; float:left;}
.main_image a.collapse { /*--This is our hide/show tab--*/  background:url(btn_collapse.gif) no-repeat left top; height:27px; width:93px; text-indent:-99999px;...

JavaScript

$(document).ready(function() {
    $(".main_image .desc").show(); //Show Banner
    $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
    $(".image_thumb ul li:first").addClass('active'); //Add the active class (highlights the very first list item by default)
    $(".image_thumb ul li").click(function(){
        //Set Variables
        var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
        var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
        var imgDesc = $(this).find('.block').html();  //Get HTML of the "block" container
        var imgDescHeight = $(".main_image").find('.block').height(); //Find the height of the "block"

        if ($(this).is(".active")) {  //If the list item is active/selected, then...
                return false; // Don't click through - Prevents repetitive animations on active/selected list-item
        } else { //If not active then...
                //Animate the Description
                $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 ,
                    function() { //Pull the block down (negative bottom margin of its own height)
                        $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 250 ); //swap the html of the block, then pull the block container back up and set opacity
                        $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag)
                    }
                );
        }
        
        //Show active list-item
        $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all list-items
        $(this).addClass('active');  //Add class of 'active' on the selected list
        return false;        
    }) .hover(function(){ //Hover effects on list-item
        $(this).addClass('hover'); //Add class "hover" on hover
        }, function() {
        $(this).removeClass('hover'); //Remove...