JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<script src="http://codeorigin.jquery.com/jquery-2.0.3.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="container">
<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>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla totam soluta a ratione voluptates voluptate iusto maxime distinctio ipsam voluptatem error saepe eveniet perferendis odio blanditiis modi odit deserunt.
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque reiciendis numquam odio ratione maiores aut ad consequuntur perferendis perspiciatis expedita quae provident quisquam esse illum delectus tenetur dolorum fugiat fuga.
    </div>
    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis libero alias maxime soluta obcaecati rerum voluptatem dignissimos illo. Ex inventore non aut aliquid sequi perspiciatis tempora facilis placeat maiores consectetur.
    </div>
  </div>
</div>
</div>

CSS

body{
    background-color:red;
    margin-top:100px;
}
.carosuel{
    position:relative;
}
ol.carousel-indicators{
    position:absolute;
    left:0;
    top:-40px;
}