JSFiddle - React, Tailwind, and code Playground

HTML

<meta charset="utf-8"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="home.css">
        <link rel="shortcut icon" href="assets/V.ico" />
<div class="row">
  <div class="col-3 marg" href="#myCarousel" data-slide-to="0">
    <img src="https://preview.ibb.co/cUrJE6/005.jpg" data-toggle="modal" data-slide-to="0" data-target="#myModal" style="height: 300px;" class="hover-shadow cursor w-100">
  </div>

  <div class="col-3 marg" href="#myCarousel" data-slide-to="1">
    <img src="https://image.ibb.co/iBbPnR/006.jpg" data-toggle="modal" data-slide-to="1" data-target="#myModal" style="height: 300px;" class="hover-shadow cursor w-100">
  </div>
  
    <div class="col-3 marg" href="#myCarousel" data-slide-to="2">
    <img src="https://preview.ibb.co/dmo11m/003.jpg" data-toggle="modal" data-slide-to="2" data-target="#myModal" style="height: 300px;" class="hover-shadow cursor w-100">
  </div>
</div>

<div id="myModal" class="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="https://preview.ibb.co/cUrJE6/005.jpg">
          </div>

          <div class="carousel-item">
            <img class="d-block w-100" src="https://image.ibb.co/iBbPnR/006.jpg">
          </div>
        
         <div class="carousel-item">
            <img class="d-block w-100" src="https://preview.ibb.co/dmo11m/003.jpg">
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
          <span...

CSS

.carousel-caption {
  color: black;
  text-shadow: 2px 0px 4px white;
  font-weight: bold;
}

.carousel > .carousel-control-prev {
  background-image: linear-gradient( to right, black 0%, transparent 100%);
}

.carousel > .carousel-control-next {
  background-image: linear-gradient( to left, black 0%, transparent 100%);
}

/* Styly pro modal, aby byl pěkný a fitoval ke všem obrázkům PS: Nezkoušel jsem ultra široké */
 #myModal > .modal-dialog {
  max-width: 90vw;
  display: table;
}

#myCarousel > .carousel-inner > .carousel-item > img {
  max-height: 90vh;
}