JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>



<div class="modal-body predefineModal">
  <div class="bs-example">
    <div id="myCarousel" class="carousel slide">
      <!-- Carousel indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
      </ol>
      <!-- Wrapper for carousel items -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="table-responsive">
            <table class="table table-bordered" id="joe">
              <thead class="party_head">
                <tr>
                  <th>#</th>
                  <th>S.No</th>
                  <th>Trans.Type</th>
                  <th>Voucher Date</th>
                  <th>To A/c Name</th>
                  <th>Narration</th>
                  <th>Debit</th>
                  <th>Credit</th>
                </tr>
              </thead>
              <tbody>
                <tr class="line-content">
                  <td><input id="indeterminate-checkbox" type="checkbox" /></td>
                  <td>1</td>
                  <td>CP</td>
                  <td>DD-MM-YYYY</td>
                  <td>JOE</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
                <tr class="line-content">
                  <td>
                    <input type="checkbox" id="indeterminate-checkbox" />
                  </td>
                  <td>2</td>
                  <td>BP</td>
                  <td>DD-MM-YYYY</td>
                ...

CSS

#preModal .viewing {
   -webkit-transform: translate(0, -50%);
   -o-transform: translate(0, -50%);
   transform: translate(0, -50%);
   top: 50%;
   margin: 0 auto;
 }

 input[type=checkbox] {
   /* left: 23px; */
   width: 15px;
 }

 .carousel-control-prev {
   height: fit-content;
   width: fit-content;
 }

 .carousel-control-next {
   right: -20px;
   height: fit-content;
   width: fit-content;

 }

 .contd {
   /* width: 160%;
            right: 30%; */
   width: 132%;
   right: 16%;
 }

 .predefineModal {
   padding-bottom: 0px;
   padding-top: 0px;
 }

 .carousel-control-prev-icon,
 .carousel-control-next-icon {
   display: none;
 }

 .contd:hover .carousel-control-next-icon {
   display: block;
 }

 .contd:hover .carousel-control-prev-icon {
   display: block;
 }

 .second {
   position: relative;
   right: 6%;
 }

 .skip {
   color: #fff;
   background-color: #007bff;
   border-color: #007bff;
   box-shadow: none;
   display: inline-block;
   font-weight: 400;
   border: 1px solid transparent;
   padding: 3px .75rem;
   font-size: 1rem;
   border-radius: .25rem;
 }

 .skip:hover {
   background-color: #77b2f1;
 }

 .btn {
   padding: 3px .75rem !important;
 }

 .periodTime {
   padding: 15px;
   padding-bottom: 0px;
 }

 .carousel {
   /* background: #2f4357; */
   margin-top: 20px;
 }

 .carousel-control-prev-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
   position: relative;
   right: 2%;
 }

 .carousel-control-next-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
   position: relative;
 }

 .carousel-item {
   min-height: 280px;
   filter: blur(.0px) !important;
   /* transform:...

JavaScript

$(document).ready(function() {
   $("#myCarousel").carousel({
     interval: false
   });
 });
 
 $('#joe').pagination({

   pageSize: 3,
   showPageNumbers: false,
   showNavigator: true,
   callback: function(data, pagination) {
     // template method of yourself

   }
 })