JSFiddle - React, Tailwind, and code Playground

by Ganesh

HTML

<div class="fullwidthbanner-container banner" style="overflow: visible;">
                <div class="fullwidthbanner revslider-initialised tp-simpleresponsive hovered" id="revslider-171" style="height: 920px;">
                    <ul style="display: block; overflow: hidden; width: 100%; height: 100%; max-height: 500px;">
                    
                    <li data-transition="random" data-slotamount="7" data-masterspeed="300" style="width: 100%; height: 100%; overflow: hidden; visibility: visible; left: 0px; top: 0px; z-index: 18; opacity: 1;">
                        <div class="slotholder"><img src="images/revolution/slider-bg-one.jpg" alt="Slider BG" class="defaultimg" style="width: 1920px; height: 500px; position: absolute; left: -284.5px; top: 0px; opacity: 0;"></div>
     
                                 
                             
     <div class="caption sft tp-caption start" data-x="57" data-y="0" data-speed="300" data-start="1000" data-easing="easeOutBack" style="-webkit-transform: scale(1, 1) rotate(0deg); opacity: 0; left: 262.5px; top: -50px; visibility: visible;"><img src="images/revolution/i-pad.png" alt="Image 7" style="width: 351px; height: 500px;"></div>
                                 <div class="caption sfb tp-caption start" data-x="254" data-y="0" data-speed="300" data-start="2000" data-easing="easeOutBack" style="-webkit-transform: scale(1, 1) rotate(0deg); opacity: 0; left: 459.5px; top: 50px; visibility: visible;"><img src="images/revolution/mac.png" alt="Image 7" style="width: 590px; height: 500px;"></div>
                        <div class="slotholder"><img src="images/revolution/slider-bg-one.jpg" alt="Slider BG" class="defaultimg" style="width: 1920px; height: 500px; position: absolute; left: -284.5px; top: 0px; opacity: 0;"></div>
     <div class="caption sft tp-caption start" data-x="666" data-y="0" data-speed="300" data-start="2500" data-easing="easeOutBack" style="-webkit-transform: scale(1, 1) rotate(0deg); opacity:...

CSS

.fullwidthbanner-container{
	width:100% !important;
	position:relative;
	padding:0;
	max-height:500px !important;
	height:auto !important;
	overflow:hidden !important;
}
.rev_slider_wrapper {
	width:100%;
	position:relative;
	height:540px;
}
.rev_slider { overflow:hidden !important; }

 .rev_slider_wrapper ul { overflow:hidden !important; } 
.tp-simpleresponsive > ul > li { padding-bottom:0; }

/*************************
	-	CAPTIONS	-
**************************/

.tp-hide-revslider,.tp-caption.tp-hidden-caption	{	visibility:hidden !important; display:none !important;}

.tp-caption { z-index:1;}

.tp-caption.gray_bigger {
	font-size:40px;
  	font-family:'Open Sans', sans-serif;
	font-weight:800;
 	line-height:50px;
	color:#424242;
	text-transform:uppercase;
}

.tp-caption.pac_subtitle {
  	font-size:28px;
	line-height:30px;
    color:#5b0d07;
  	font-family: 'Pacifico', cursive;
 	text-transform:capitalize;
}

.tp-caption.dt-sc-button.small{line-height:20px;}

.tp-caption.dt-sc-button.small a{color:#fff;}

.tp-caption.gray_content {
	font-size:16px;
	color:#424242;
	font-family:'Open Sans', sans-serif;
	line-height:22px;
	font-weight: 600;
}

.tp-caption.transparent-box{
	background:#FFF;
	width: 940px;
	height:110px;
	opacity:0.9 !important; 
filter:alpha(opacity=90 !important); /* For IE8 and earlier */
	
	}

.tp-caption.red-pac{
	font-size: 18px;
	line-height: 36px;
  	font-family: 'Pacifico', cursive;
	font-weight:400;
	color:#be4536;
	background:url(../../images/revolution/bottom-border.png) no-repeat bottom center;
	}
.tp-caption.red-pac a:hover{	color:#be4536;
}

.tp-caption.big_gray{
	font-size: 30px;
	line-height: 36px;
	font-family: 'Open Sans', sans;
	font-weight:800;
	color:#464646;
	text-transform: uppercase;			
	}
.tp-caption.big_white{
			position: absolute;
			color: #fff;
			text-shadow: none;
			font-weight: 800;
			font-size: 20px;
			line-height: 20px;
			font-family: 'Open Sans', sans;
			padding: 3px 4px;
			padding-top: 1px;
			margin:...