JSFiddle - React, Tailwind, and code Playground

by unknown601

HTML

<div class="tp-leftarrow tparrows" style="top: 50%; transform: matrix(1, 0, 0, 1, 30, -70); left: 0px;"></div>
<div class="tp-rightarrow tparrows" style="top: 50%; left: 100%; transform: matrix(1, 0, 0, 1, -68, -70);"></div>

CSS

.tparrows {
  cursor: pointer;
  background: #000;
  background: rgba(0, 0, 0, 0.5);
  width: 40px;
  height: 40px;
  position: absolute;
  display: block;
  z-index: 1000;
}

.tparrows.tp-rightarrow:before {
  content: '';
  background: url(https://s22.postimg.cc/hvogkp28h/modules-nav-arrows.png) no-repeat -53px -3px;
  background-size: cover;
  width: 40px;
  height: 145px;
}

.tparrows.tp-leftarrow:before {
  content: '';
  background: url(https://s22.postimg.cc/hvogkp28h/modules-nav-arrows.png) no-repeat -4px -3px;
  background-size: cover;
  width: 40px;
  height: 145px;
}

.tparrows.tp-leftarrow:before {
  content: '\e824';
}
.tparrows.tp-rightarrow:before {
  content: '\e825';
}
.tparrows:before {
  font-family: "revicons";
  font-size: 15px;
  color: #fff;
  display: block;
  line-height: 40px;
  text-align: center;
}