JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container content best-of-container">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="thumbnail adjust1">
                            <div class="col-md-2 col-sm-2 col-xs-12">
                                <img class="media-object img-rounded img-responsive" src="http://placehold.it/100">
                            </div>
                            <div class="col-md-10 col-sm-10 col-xs-12">
                                <div class="caption">
                                    <p class="text-info lead adjust2">I can't wait to test this out.</p>
                                    <p><span class="glyphicon glyphicon-thumbs-up"></span> This is a testimonial window. Feedback of user can be displayed here.</p>
                                    <blockquote class="adjust2">
                                        <p>Tester McTesty</p> <small><cite title="Source Title"><i class="glyphicon glyphicon-globe"></i> www.domain.com</cite></small> 
                                    </blockquote>
                                </div>
                            </div>
                       ...

CSS

.carousel-indicators .active {
    background: #31708f;
}
.content {
    margin-top:20px;
}
.adjust1 {
    float:left;
    width:100%;
    margin-bottom:0;
}
.adjust2 {
    margin:0;
}
.carousel-indicators li {
    border :1px solid #ccc;
}
.carousel-control {
    color:#31708f;
    width:5%;
}
.carousel-control:hover, .carousel-control:focus {
    color:#31708f;
}
.carousel-control.left, .carousel-control.right {
    background-image: none;
}
.media-object {
    margin:auto;
    margin-top:15%;
}