JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="banner-page-wrap">
<div class="banner-wrap">
    <div class="fazzel-logo" onclick="window.location='http://fazzel.me' "><a href="http://fazzel.me">FAZZEL.ME</a></div>
    <div class="carousel">
        <ul class="panes">
            <li>
                <h2>Share, connect, and collaborate on fashion-related topics.</h2>
                <img src="http://i.imgur.com/uJUKuh.jpg" alt="">
            </li>
        
            <li>
                <h2>Share looks, clothes, shoes, and accessories from your virtual closet.</h2>
                <img src="http://i.imgur.com/lFDJXh.jpg" alt="">
            </li>
        
            <li>
                <h2>Form fashion communities by connecting with friends and creating groups.</h2>
                <img src="http://i.imgur.com/djpy3h.jpg" alt="">
            </li>
            
            <li>
                <h2>Come, check it out. It's fun!</h2>
                <img src="http://i.imgur.com/x3SsPh.jpg" alt="">
            </li>
            
            <li>
                <h2>Sign up now by registering or just use Facebook Connect to create your account. Join the Community!</h2>
                <img src="http://i.imgur.com/2HiFeh.jpg" alt="">
            </li>
           
        </ul>
    </div>
</div>
</div>

CSS

.banner-page-wrap {
 display: block;
 width: 100%;
background-color: #999999;
background-image: -webkit-repeating-linear-gradient(-30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), -webkit-repeating-linear-gradient(30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), -webkit-linear-gradient(30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), -webkit-linear-gradient(-30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
}
.banner-wrap {
 display: block;
 width: 1100px;
 height: 300px;
 overflow: hidden;
 font-family: "arial", serif;
 position: relative;
 margin: 0 auto;
}
.banner-wrap .fazzel-logo {
display: block;
width: 142px;
height: 34px;
padding: 6px;
background: #ffffff url(http://www.fazzle.me/b/images/faszel-logo.png);
background-position: center center;
background-repeat: no-repeat;
text-indent: -9999px;
position: absolute;
top: 32px;
left: 32px;
z-index: 9999;
}
.carousel{
    overflow:hidden;
    width:100%;
    position:relative;
}
.panes{
    list-style:none;
    position:relative;
    width:500%; /* Number of panes * 100% */
    overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */
     
    -moz-animation:carousel 30s infinite;
    -webkit-animation:carousel 30s infinite;
    -ms-animation:carousel 30s infinite;
    animation:carousel 30s infinite;
    
     margin: 0;
     padding: 0;
}
.panes > li{
    position:relative;
    float:left;
    width:1100px; /* 100 / number of panes */
}
.panes > li > a{
    display:block;
}
.carousel img{
    display:block;
    width:100%;
    max-width:1100px;
}
.carousel h2{
    font-size:24px;
    padding:0.5em;
    position:absolute;
    right:10px;
    bottom:10px;
    left:10px;
    text-align:right;
    color:#fff;
    background:rgba(0,0,0,0.6);
    background:...