JSFiddle - React, Tailwind, and code Playground

by Sahil Kashyap

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js" integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI=" crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/esm/popper.min.js" integrity="sha256-3Iu0zFU6cPS92RSC3Pe4DBwjIV/9XKyzYTqKZzly6A8=" crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
<div class="container">
  <div class="row">
    <!--Ik gebruik hieronder alleen het middiv omdat dat de enige info is die ik wil vervangen-->
    <div class="col-md-6" id="middiv" style="background-color: rgba(255, 255, 255, 0.1)">
      <div id="myCarousel" class="carousel slide" data-ride="carousel" align="left">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://dummyimage.com/600x400/000/fff" alt="Los Angeles" style="width:80%;">
          </div>

          <div class="carousel-item">
            <img src="https://dummyimage.com/600x400/000/fff" alt="Chicago" style="width:80%;">
          </div>

          <div class="carousel-item">
            <img src="https://dummyimage.com/600x400/000/fff" alt="New york" style="width:80%;">
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
          <i class="fa...

CSS

/* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }

#myCarousel .carousel-indicators {
    position: static;
    margin-top:20px;
}

#myCarousel .carousel-indicators > li {
  width:200px;
}

 #myCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5;
 }

  #myCarousel .carousel-indicators li.active img {
    opacity: 1;
  }

  #myCarousel .carousel-indicators li:hover img {
    opacity: 0.75;
  }
.fa-chevron-left, .fa-chevron-right  {
  color:black;
}