JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <img src='http://www.rocktfan.com/images/slider/Untitled-1.png' style='width:750px; height:380px;' />
            <div class='item-body'>
                <table>
                    <tr>
                        <td>
                             <h1>1</h1>

                        </td>
                        <td>
                            <div>
                                <ol>
                                    <li>click on latest</li>
                                    <li>find a post you like and click on the wall name</li>
                                    <li>track the wall</li>
                                </ol>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="carousel-caption ">
                 <h4 style='text-align:center;'>track someone’s wall</h4>

            </div>
        </div>
        <div class="item">
            <img src='http://www.rocktfan.com/images/slider/Untitled-2.png' style='width:750px; height:518px;' />
            <div class='item-body'>
                <table>
                    <tr>
                        <td>
                             <h1>2</h1>

                        </td>
                        <td>
                            <div>
                                <ol>
                                    <li>create an artist wall</li>
            ...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin-top: 10px;
}
#myCarousel {
    background-color:#000;
    width:750px;
    height:380px;
    position:absolute;
    top:50px;
    left:30px;
}
.item-body {
    position:absolute;
    top:70px;
    left:100px;
    color:whitesmoke;
    width:500px;
    text-shadow: 2px 2px 2px #444;
    filter: dropshadow(color=#444, offx=2, offy=2);
}
.item-body h1 {
    font-size:94px;
}
.item-body ol {
    padding:20px 20px 20px 40px;
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM2NjA5MyIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM2NjA5MyIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top, rgba(54, 96, 147, 0.2) 0%, rgba(54, 96, 147, 0.2) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(54, 96, 147, 0.2)), color-stop(100%, rgba(54, 96, 147, 0.2)));
    background: -webkit-linear-gradient(top, rgba(54, 96, 147, 0.2) 0%, rgba(54, 96, 147, 0.2) 100%);
    background: -o-linear-gradient(top, rgba(54, 96, 147, 0.2) 0%, rgba(54, 96, 147, 0.2) 100%);
    background: -ms-linear-gradient(top, rgba(54, 96, 147, 0.2) 0%, rgba(54, 96, 147, 0.2) 100%);
    background: linear-gradient(to bottom, rgba(54, 96, 147, 0.2) 0%, rgba(54, 96, 147, 0.2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33366093', endColorstr='#33366093', GradientType=0);
   ...

JavaScript

$('.carousel').carousel({
    interval: 50000
})