JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css">
<header class="app-header">
  <span>main</span> / <span>about</span> / <span>contacts</span>
</header>

<div class="owl-carousel owl-theme owl-theme--main">
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/1/);">
    <h1>Awesome Carousel 1</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/2/);">
    <h1>Awesome Carousel 2</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/3/);">
    <h1>Awesome Carousel 3</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/4/);">
    <h1>Awesome Carousel 4</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/5/);">
    <h1>Awesome Carousel 5</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/6/);">
    <h1>Awesome Carousel 6</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/7/);">
    <h1>Awesome Carousel 7</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
  <div class="item" style="background-image: url(http://lorempixel.com/800/500/technics/8/);">
    <h1>Awesome Carousel 8</h1>
    <p>tag: techniks</p>
    <a href="#">Go To >></a>
  </div>
 ...

CSS

* {
  box-sizing: border-box;
}

html {
  font-family: "Lato","Helvetica Neue","Helvetica", Arial,sans-serif;
}

body {
  max-width: 640px;
  margin: 0 auto;
}

.app-header {
  position: fixed;
  z-index: 35;
  top: 0;
  left: 0;
  width: 100%;
  height: 5rem;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 26px 0;
}

.owl-theme {
  margin: 0 0 1rem 0;
}

.owl-theme .item {
  height: 10rem;
  background-color: #ffc107;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 1rem;
}

.item h4 {
    color: #FFF;
    font-weight: 400;
    margin-top: 0rem;
}

.owl-theme--main .item {
  position: relative;
  height: 20rem;
  padding-top: 5rem;
}

.owl-theme--main .item * {
  position: relative;
  z-index: 10 !important;
}

JavaScript

$('.owl-theme--main').owlCarousel({
  singleItem: true,
});

$('.owl-theme--ctrl').owlCarousel({

});