JSFiddle - React, Tailwind, and code Playground

by tonystar

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="carousel-example" class="carousel slide" data-ride="carousel">
		<!-- Wrapper for slides -->
		<div class="row" style="background-color: #e3dfd6;">
			<div class="col-xs-offset-4 col-xs-8">
				<div class="carousel-inner">
					<div class="item active">
						<div class="carousel-content">
							<div>
								<p class="mytext">This is the text of the first item.</p>
								<span class="name">This is the first name</span>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="carousel-content">
							<div>
								<p class="mytext">This is the text of the second item.This is the text of the second item.</p>
								<span class="name">This is the second name, This is the second name</span>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="carousel-content">
							<div>
								<p class="mytext">This is the text of the third item.This is the text of the third item.This is the text of the third item.</p>
								<span class="name">This is the third name,This is the third name,This is the third name,</span>
							</div>
						</div>
					</div>
					<div class="col-xs-offset-4 col-xs-8">
      <ol class="bullets carousel-indicators"> 
        <li class="active" data-target="#carousel-example" data-slide-to="0"></li>
        <li class="" data-target="#carousel-example" data-slide-to="1"></li>
        <li class="" data-target="#carousel-example" data-slide-to="2"></li>
        </ol>
  </div>
				</div>
			</div>
		</div>

CSS

.row .col-xs-offset-4 {
       margin-left: 0;
    }
    .row .col-xs-8 ,.carousel-content div{
       width:100%;
    }
.bullets,.carousel-content{
    text-align:center;

}
.bullets{
   padding:0;
    bottom: 10px;
}
.carousel-content {
	color: black;
	display: flex;
	align-items: center;
    padding: 20px 0 50px 0;
}

.name {
	color: black;
	display: block;
	font-size: 20px;
	text-align: center;
}

.mytext {
	border-left: medium none;
	font-size: 24px;
	font-weight: 200;
	line-height: 1.3em;
	margin-bottom: 10px;
	padding: 0 !important;
	text-align: center;
}

.bullets li {
	background: none repeat scroll 0 0 #ccc;
	border: medium none;
	cursor: pointer;
	display: inline-block;
	float: none;
	height: 10px;
	width: 10px;
}

.bullets li:last-child {
	margin-right: 0;
}

.bullets li {
	border-radius: 1000px;
}

JavaScript

setCarouselHeight('#carousel-example');

		function setCarouselHeight(id) {
			var slideHeight = [];
			$(id + ' .item').each(function() {
				// add all slide heights to an array
				slideHeight.push($(this).height());
			});

			// find the tallest item
			max = Math.max.apply(null, slideHeight);

			// set the slide's height
			$(id + ' .carousel-content').each(function() {
				$(this).css('height', max + 'px');
			});
		}