JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
        <div id="mainContainer">
            <p class="copyrights" id="copyrights"></p>
            <div>
                <img id="Image_Car" src="http://i.share.pho.to/25a090ef_c.png" />
            </div>
                  <div id="headlineText">
            <p id="headline1Txt" >Sample bag1</p>
            <p id="headline2Txt" >Sale Price $25</p>
            <p id="headline3Txt" >Sale $14<p>
        </div>
            <div id="disclaimer" >
               Details*
            </div>
              <div id="Image_logo">
                <img id="Imglogo" src="http://i.share.pho.to/e114a8e1_c.png" />
            </div>
          
           <div >
           <button class="btn btn-primary" type="button"  id="ctaBtn"><div id="fadeIn" >   </div></button>
  
        </div>
    </div>
    </div>

CSS

#wrapper {

width:728px;
    height:90px;
    position: relative;

}

#mainContainer {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border:5px solid #BACAE4;
width:728px;
    height:90px;
    overflow: hidden;
    position: relative;
}

 
#disclaimer {
  

    font-size:10px;
     position:absolute;
width:30px;
    top: 168px;
    left: 235px;
}


#Image_Car  {
    position:absolute;
    overflow: hidden;
   text-align:center;
    top:-10px;
    left: -170px;
      
}

#ctaBtn{
font-family: arial, helvetica, sans-serif;
font-size:12px;
		position:absolute;
		top:45px;
right:10px;
	
    height:28px;
}	

#Image_logo img
{
    top:42px;
    position:absolute;
    width:auto;
    height:30px;
 
    left:480px;
}

.transition {
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}



 #headline1Txt, #headline2Txt, #headline3Txt
{
  
    position: relative;
    margin: 0px 2px;
   top:110px;
	
    left: -260px;
    width: 250px;
    margin-bottom: 10px;
}
#headline2Txt, #headline3Txt
{
    font-size:16px;line-height: 1.1;
    margin: 0px;
    padding: 1px;
}

#headline1Txt
{
 color: transparent;
     
      
   
   left:12px;
    display: none;
     font-size:20px;line-height: 1.1;
    margin: 0px;
    padding: 1px;
}
/* new css */
.copyrights {display: none;color: white; padding: 10px;font-size:12px;}
.hovered .copyrights { display: block; }
.hovered #mainContainer { background: black; border-color: black;}
.hovered #Image_Car { opacity:0; }
.hovered #ctaBtn {    opacity:0; }
.hovered #Image_logo img {    opacity:0; }
.hovered #headlineText {     opacity:0; }
.hovered #disclaimer {     opacity:.8; }
.hovered #mainContainer{
    -moz-transition-property:background,opacity,display,border-color,background-color;
    -moz-transition-timing-function:ease-in-out;
    -moz-transition-duration:0.4s;
   ...

JavaScript

$(document).ready(function() {
    var button_text = "Learn Now";
    $("#ctaBtn").text(button_text);
    $("#ctaBtn").css('width', parseFloat(textWidth(button_text) + 30) + "px");
    bannerAnimation();
});

function bannerAnimation() {

    //Jquery Animation
    $("#Image_Car").animate({
        left: "50"
    }, 400, function() {
        $("#Image_Car").animate({
            left: "10"
        }, 200);
    });

    $("#headline1Txt").css('color', 'black');
    //$("#headline1Txt").html("New Text").fadeIn("slow");
    $("#headline1Txt").fadeIn(3000);
    setTimeout(function() {
        $("#headline2Txt").animate({
            left: "20"
        }, 500, function() {
            $("#headline3Txt").animate({
                left: "20"
            }, 500, function() {
                $("#headline3Txt").animate({
                    left: "10"
                }, 200);
            });
            $("#headline2Txt").animate({
                left: "10"
            }, 200);
            $('#fadeIn').text("");
            button_effect();
        });
    }, 1000);
    $('#disclaimer').hover(
        function() {
            $('#wrapper').addClass('hovered');
        }, function() {
            $('#wrapper').removeClass('hovered');
        }
    );

    $('#mainContainer').hover(function() {

        $("#Image_Car").addClass('transition');
        $("#ctaBtn").addClass('transition');
        $("#Image_logo img").addClass('transition');

    }, function() {
        $("#Image_Car").removeClass('transition');
        $("#ctaBtn").removeClass('transition');
        $("#Image_logo img").removeClass('transition');
    });
}

function button_effect() {
    var string = "Learn More Now";
    var q = jQuery.map(string.split(''), function(letter) {
        return $('<span>' + letter + '</span>');
    });

    var dest = $('#fadeIn');

    var c = 0;
    var i = setInterval(function() {
        q[c].appendTo(dest).hide().fadeIn(200);
        c += 1;
        if (c >= q.length)...