JSFiddle - React, Tailwind, and code Playground

by Alon Rotem

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
	<div class="container">
		<div class="row">
        	<div class="col-md-10 offset-md-1 col-12 slider-main">
        		<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
				  <ol class="carousel-indicators">
				    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
				    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
				    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
				  </ol>
				  <div class="carousel-inner text-white m-auto">
				    <div class="carousel-item active">
				    	<h3 class="text-dark bg-white mb-4 pl-3 pr-3 pt-1 pb-1 font-weight-bold">HOME</h3><br>
				      	<p class="text-justify">
				      		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				      		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				      	</p>
				    </div>
				    <div class="carousel-item">
				      	<h3 class="text-dark bg-white mb-4 pl-3 pr-3 pt-1 pb-1 font-weight-bold">ABOUT US</h3><br>
				      	<p class="text-justify">
				      		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				      		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				      	</p>
				    </div>
				    <div class="carousel-item">
				      	<h3...

CSS

body{
    font-family: 'Ropa Sans', sans-serif;
	background: #E96D65;
}
.carousel-indicators{
	top: 200px;
}
.slider-main{
	margin-top: 220px;
}
.carousel-inner{
	width: 70%;
}
.carousel-inner .carousel-item h3{
	display: inline-block;
	opacity: 0.5;
}
.carousel-inner .carousel-item p{
	font-size: 17px;
}

@media (max-width: 360px) {
	.carousel-indicators{
		top: 320px;
	}	
}