JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://lorempixel.com/640/480/nightlife/" />
<span class="img-text">nightlife</span>
</div>
<div class="item">
<img src="https://lorempixel.com/640/480/abstract/" />
<span class="img-text">abstract</span>
</div>
<div class="item">
<img src="https://lorempixel.com/640/480/animals/" />
<span class="img-text">animals</span>
</div>
<div class="item">
<img src="https://lorempixel.com/640/480/nature/" />
<span class="img-text">nature</span>
</div>
<div class="item">
<img src="https://lorempixel.com/640/480/business/" />
<span class="img-text">business</span>
</div>
<div class="item">
<img src="https://lorempixel.com/640/480/cats/" />
<span class="img-text">cats</span>
</div>
<div class="item">
<img src="https://lorempixel.com/640/480/city/" />
<span class="img-text">city</span>
</div>
<div class="item">
<img src="https://lorempixel.com/640/480/food/" />
<span class="img-text">food</span>
</div>
<div class="item">
<img src="https://lorempixel.com/640/480/fashion/" />
<span class="img-text">fashion</span>
</div>
<div class="item">
<img src="https://lorempixel.com/640/480/people/" />
<span class="img-text">people</span>
</div>
<div class="item">
<img src="https://lorempixel.com/640/480/sports/" />
<span class="img-text">sports</span>
</div>
<div class="item">
<img src="https://lorempixel.com/640/480/technics/" />
<span class="img-text">technics</span>
</div>
<div class="item">
<img src="https://lorempixel.com/640/480/transport/" />
<span class="img-text">transport</span>
</div>
</div><br><br>

CSS

width: 1000px;
    margin: auto;
    position: relative;
  }
  .owl-carousel .owl-nav{
    overflow: hidden;
    height: 0px;
  }

  .owl-theme .owl-dots .owl-dot.active span, 
  .owl-theme .owl-dots .owl-dot:hover span {
      background: #2caae1;
  }


  .owl-carousel .item {
      text-align: center;
  }
  .owl-carousel .nav-btn{
      height: 47px;
      position: absolute;
      width: 26px;
      cursor: pointer;
      top: 100px !important;
  }

  .owl-carousel .owl-prev.disabled,
  .owl-carousel .owl-next.disabled{
    pointer-events: none;
    opacity: 0.2;
  }

  .owl-carousel .prev-slide{
      background: url(nav-icon.png) no-repeat scroll 0 0;
      left: -33px;
  }
  .owl-carousel .next-slide{
      background: url(nav-icon.png) no-repeat scroll -24px 0px;
      right: -33px;
  }
  .owl-carousel .prev-slide:hover{
     background-position: 0px -53px;
  }
  .owl-carousel .next-slide:hover{
    background-position: -24px -53px;
  }

  span.img-text {
    text-decoration: none;
    outline: none;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    cursor: pointer;
    width: 100%;
    font-size: 23px;
    display: block;
    text-transform: capitalize;
  }
  span.img-text:hover {
    color: #2caae1;
  }