JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="homepageHero">
          <li> <a href="#a" class="expandingBtn">Discover</a>
            <div id="hpCarouselWrapper" style="display:none;">
              <div id="hpCarousel" class="floatingNavCarousel">
                <ul>
                  <li>
                    <div class="carouselitemImgHolder"> <img src="sagatheme/images/thumb_carouselImage.jpg" alt="refresh image 1" /> </div>
                    <div class="carouselitemContentHolder">
                      <h3>Refresh your money habit</h3>
                      <p>For the lowest fee check out the saga stocks and share ISA</p>
                      <a href="a">read on</a> </div>
                  </li>
                  <li>
                    <div class="carouselitemImgHolder"> <img src="sagatheme/images/thumb_carouselImage.jpg" alt="refresh image 1" /> </div>
                    <div class="carouselitemContentHolder">
                      <h3>Get out into the fresh air </h3>
                      <p>Saga's health club has ideas to get you fit and motivated</p>
                      <a href="a">discuss</a> </div>
                  </li>
                  <li>
                    <div class="carouselitemImgHolder"> <img src="sagatheme/images/thumb_carouselImage.jpg" alt="refresh image 1" /> </div>
                    <div class="carouselitemContentHolder">
                      <h3>Pour yourself a long refreshing drink </h3>
                      <p>Watch the latest videos on Saga's World Cruise</p>
                      <a href="a">watch </a> </div>
                  </li>
                  <li>
                    <div class="carouselitemImgHolder"> <img src="sagatheme/images/thumb_carouselImage.jpg" alt="refresh image 1" /> </div>
                    <div class="carouselitemContentHolder">
                      <h3>Get out into the fresh air </h3>
                      <p>Saga's health club has ideas to get you fit and motivated</p>
                      <a href="a">discuss </a> </div>
      ...

CSS

ul#homepageHero{
    margin:0px;
    min-height: 437px;
    }

ul#homepageHero li{
    position:relative;
    background-color: #bdb79e;
    border: 5px solid #FFFFFF;
    float:left;
    margin: 4px 0;
    padding: 5px 15px 6px;
    clear:both;
    }
    
ul#homepageHero li a.expandingBtn{
    color: #333;
    font-size: 3.2em;
    font-style: italic;
    font-weight: bold;
    text-decoration:none;
    background:url(../images/icon_arrow.png) no-repeat right 14px;
    padding-right:25px;
    }
    
ul#homepageHero li a.expandingBtn img{
        margin-left: 11px;
        }    

ul#homepageHero li #hpCarousel {
    background:url(../images/seperator.gif) repeat-y right top;
    width:96%;
}
.jcarousel-clip {
    /*background:url(../images/seperator.gif) repeat-y left top;*/
    margin-left:0;
    padding-left:15px;
}
.jcarousel-clip-horizontal { margin-left:28px !important; }
ul#homepageHero li #hpCarousel ul li{
    background-color: none;
    border:none;
    position:static;
    width:276px;
    min-height:95px;
    margin-right:15px;
    float:left;
    clear:none;
    padding:0px;
    }

#hpCarousel{
    position:absolute; 
    top: 20px; 
    clear:both;
    }

#hpCarousel    ul li .carouselitemImgHolder{
    float:left;
    }

#hpCarousel    ul li .carouselitemContentHolder{
    float:right;
    height:95px;
    overflow:hidden;
    width:175px;
    }
    
#hpCarousel    ul li .carouselitemContentHolder h3    {
        font-size:1.2em;
        font-weight:bold;
        font-style:italic;
        margin: 4px 0 3px;
        }

#hpCarousel    ul li .carouselitemContentHolder p{
    font-family:Arial, Helvetica, sans-serif;
    font-size:1.0em;
    margin-bottom:3px;
    }

#hpCarousel    ul li .carouselitemContentHolder a{
    color:#cc3333;
    font-weight:bold;
    font-style:italic;
    text-decoration:none;
    }

.expandedFloatingNav{
    width:96%;
    height:167px;
    /*margin-left:-21px!important;*/
    }


#hpCarousel .carouselitemContentHolder { 
...

JavaScript

var expandingBtn = jQuery(".expandingBtn");
    expandingBtn.click(function() {
        collapsePanel();
        jQuery(this).css('background-position','right -999px');                        
        jQuery(this).parent().addClass("expandedFloatingNav");
        jQuery(this).parent().find("#hpCarouselWrapper").css("display","block");
        jQuery('.floatingNavCarousel').jcarousel({
            scroll: 2
        });
        return false;
    });
    
    jQuery('ul#homepageHero').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    function collapsePanel(){ 
        jQuery('ul#homepageHero li').find('a').css('background-position','right 14px');
        jQuery('ul#homepageHero li').children("#hpCarouselWrapper").hide();
        jQuery('ul#homepageHero li').removeClass("expandedFloatingNav");
    }
    jQuery('body').click(function(){ 
        if(! mouse_is_inside) {
            collapsePanel();
        }
    });