JSFiddle - React, Tailwind, and code Playground

by smlombardi

HTML

<script src="http://tympanus.net/Development/Elastislide/js/jquery.easing.1.3.js"></script>
<script src="http://tympanus.net/Development/Elastislide/js/jquery.elastislide.js"></script>
<div id="carousel" class="es-carousel-wrapper">
            <div class="es-carousel">
                <ul>
                                <li>
                                    <a title="Summertime Sangria" href="/item/42893/the-sangria-spectrum" class="image">
                                        <img alt="Summertime Sangria" src="http://finecooking.com/CMS/uploadedimages/Images/Cooking/Articles/Issues_111-120/051117040-02-pineapple-orange-sangria-recipe_sp.jpg" />
                                    </a>
                                    
                                    <span class="title">Summertime Sangria</span>
                                </li>
                                <li>
                                    <a title="Potato Salad Recipe: Create Your Own" href="/articles/cyor/potato-salad.aspx" class="image">
                                        <img alt="Potato Salad Recipe: Create Your Own" src="http://finecooking.com/cms/uploadedimages/images/cooking/articles/issues_101-110/051106076-01-classic-potato-salad-recipe_sp.jpg" />
                                    </a>
                                    
                                    <span class="title">Potato Salad Recipe: Create Your Own</span>
                                </li>
                                <li>
                                    <a title="10 Ways to Eat Less Meat" href="/item/18090/10-ways-to-eat-less-meat/" class="image">
                                        <img alt="10 Ways to Eat Less Meat" src="http://finecooking.com/cms/uploadedimages/Images/Cooking/Articles/Issues_101-110/051106054-01-eat-less-meat_sp.jpg" />
                                    </a>
                                    
                                    <span class="title">10 Ways to Eat...

CSS

@import url('reset.css');
/* Elastislide Style */
.es-carousel-wrapper{
    background: #ccc;
    padding:10px 37px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position:relative;
}
.es-carousel{
    overflow:hidden;
    background:#ccc;
}
.es-carousel ul{
    display:none;
}
.es-carousel ul li{
    height:100%;
    float:left;
    display:block;
}
.es-carousel ul li a{
    display:block;
    /*border-style:solid;
    border-color:#222;*/
}
}

.es-carousel ul li a img{
    display:block;
    border:none;
    max-height:100%;
    max-width:100%;
}
.es-nav span{
    position:absolute;
    top:50%;
    left:12px;
    background:transparent url(../images/nav.png) no-repeat top left;
    width:14px;
    height:26px;
    margin-top:-13px;
    text-indent:-9000px;
    cursor:pointer;
    opacity:0.8;
}
.es-nav span.es-nav-next{
    right:12px;
    left:auto;
    background-position:top right;
}
.es-nav span:hover{
    opacity:1.0;
}
.title {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: .7em;
}