JSFiddle - React, Tailwind, and code Playground

by zakir08

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>The Html Coder</title>
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<section class="work">
  <div class="container">
    <div class="work-wrap">
      <h2>Anything you need,we’ve <span>got you covered</span></h2>
      <div class="owl-carousel owl-theme">
        <div class="item box-shadow">
          <img src="http://demo.thehtmlcoder.net/tutorial-images/work1.jpg" alt="">
        </div>
        <div class="item box-shadow">
          <img src="http://demo.thehtmlcoder.net/tutorial-images/work1.jpg" alt="">
        </div>
        <div class="item box-shadow">
          <img src="http://demo.thehtmlcoder.net/tutorial-images/work1.jpg" alt="">
        </div>
        <div class="item box-shadow">
          <img src="http://demo.thehtmlcoder.net/tutorial-images/work1.jpg" alt="">
        </div>
        <div class="item box-shadow">
          <img src="http://demo.thehtmlcoder.net/tutorial-images/work1.jpg" alt="">
        </div>
        <div class="item box-shadow">
          <img src="http://demo.thehtmlcoder.net/tutorial-images/work1.jpg" alt="">
        </div>
      </div>
      <div class="button-wrap">
        <a href="#" class="button button-radius">See More</a>
      </div>
      <!-- /.button-wrap -->
    </div>
    <!-- /.work-wrap -->
  </div>
  <!-- /.container -->
</section>
<!-- /.work -->
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   ...

CSS

/* work setion start here  */

.work{
  padding: 90px 0 100px;
}

.work-wrap h2 {
  margin-bottom: 40px;
  color: #314584;
  font-size: 45px;
}

.work-wrap h2 span {
  display: block;
}

.work-wrap .owl-nav {
  position: absolute;
  top: -70px;
  right: 0;
}

.work-wrap .owl-nav button i {
  margin-left: 20px;
  font-size: 24px;
  color: #bbbbbc;
  transition: all .5s ease;
}

.work-wrap .owl-nav button:hover i {
  color: #314584;
}

.work-wrap .owl-nav button:focus {
  outline: none;
}


.button-wrap {
    margin-top: 40px;
    width: 100%;
    text-align: center;
}

.work-wrap a{
  display: inline-block;
    padding: 18px 35px;
    font-weight: 600;
    color: #fff;
    background-color: #ff3946;
    text-transform: capitalize;
    transition: all .5s ease;
    font-size: 18px;
    border-radius: 30px;
}
.work-wrap a:hover{
  background-color: #314584;
}

JavaScript

$(document).ready(function(){
    $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 30,
        nav: true,
        navText: ["<i class='fas fa-long-arrow-alt-left'></i>", "<i class='fas fa-long-arrow-alt-right'></i>"],
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            1000: {
                items: 3
            }
        }
    })
})