JSFiddle - React, Tailwind, and code Playground

by AshThakur

HTML

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 
<div id='slider-container'>
 
<div id='slider'>
 
  <a href='#' title='Introducing Blogger Theme'>
 
 <img alt='' src='http://2.bp.blogspot.com/-er-HWOdEoXs/T3Dw92hgCkI/AAAAAAAADkg/vmwiZuI5UN0/s1600/1.jpg' title='Introducing Blogger Theme'/>
 
 </a>
 
  <a href='#' title='Another image in a post'>
 
 <img alt='' src='http://3.bp.blogspot.com/-J1CnlhKlAqA/T3Dw-OjsLZI/AAAAAAAADks/7x_hbIpbqCE/s1600/2.jpg' title='Another image in a post'/>
 
 </a>
 
  <a href='#' title='An image in a post'>
 
 <img alt='' src='http://4.bp.blogspot.com/-Fr_53w0GhBc/T3Dw-ZCwgqI/AAAAAAAADk4/V07OQtxI0J8/s1600/3.jpg' title='An image in a post'/>
 
 </a>
 
  <a href='#' title='Testing HTML elements'>
 
 <img alt='' src='http://3.bp.blogspot.com/-Pc6JicMgDMU/T3DxATKrbjI/AAAAAAAADlE/bwcyguLj_jw/s1600/4.jpg' title='Testing HTML elements'/>
 
 </a>
 
  <a href='#' title='Category Hierarchy'>
 
 <img alt='' src='http://4.bp.blogspot.com/-Xs9hnw99qgM/T3DxA_g-pyI/AAAAAAAADlQ/XpYT_bJPkfs/s1600/5.jpg' title='Category Hierarchy'/>
 
 </a>
 
 </div>
 
<div style='clear:both'/>
</div>
<div id='welcome-box'>
<b:section class='welcome' id='welcome' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='Hello.' type='HTML'/>
</b:section>
</div>
 
</b:if>
</b:if>

CSS

/* NIVO SLIDER STYLES */

#slider-container {
width: 900px;
height: 300px;
border: 1px solid #000;
margin-bottom: 30px;
margin-left: -1px;
}

.nivoSlider {
position:relative;
}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}

.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}

.nivo-caption {
position:absolute;
right:0px;
top:125px;
background: #0c4a90;
color:#fff;
opacity:0.8;
width: auto !important;
max-width: 600px !important;
z-index:89;
display: inline !important;
}

.nivo-caption p {
padding:10px;
margin:0;
font-size: 30px;
color: #FFF;
text-align: center;
font-family: 'Dosis', Helvetica, Arial, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: 26px;
}

.nivo-caption a {
display:inline !important;
color: #FFF;
}

.nivo-html-caption {
display:none;
}

.nivo-directionNav a {
display:none;
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}

.nivo-prevNav {
left:0px;
}

.nivo-nextNav {
right:0px;
}

.nivo-controlNav a {
position:
relative;
z-index:99;
cursor:pointer;
}

.nivo-controlNav a.active {
font-weight:bold;
}

#slider {
float: left;
position:relative;
width:900px;
height:300px;
background: #000 url(http://1.bp.blogspot.com/-F80SiDnYNs0/Ts0P4xXGd5I/AAAAAAAACp0/xA5AuZGzqEg/s1600/loading.gif) no-repeat 50% 50%;
}

#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}

#slider a {
border:0;
display:block;
}

.nivo-controlNav {
position:absolute;
left:10px;
bottom:10px;
}

.nivo-controlNav a {
width:22px;
height: 22px;
background: url(http://2.bp.blogspot.com/-sBluqqpftEg/T2NshNWo7qI/AAAAAAAADcg/NB8TIlwBN7Y/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:7px;
float:left;
}

.nivo-controlNav a.active {
background-position:0 -22px;
}

.nivo-directionNav a...