JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div class="slick-arrow slick-next">

</div>
<div class="slick-arrow slick-prev">

</div>

SCSS

.slick-arrow {
  width: 5vw;
  height: 5vw;
  margin: 1vw;
}
.slick-arrow {
  position: relative;
  border-radius: 50%;
  background: black;
  &:before {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-width: 1.5vw;
    border-style: solid;
    border-color: white white transparent transparent;
    content: '';
    border-radius: 1vw;
    transform: scale(0.5) rotate(45deg);
    left: -0.5vw;
  }
  
  &.slick-prev:before {
    transform: scale(0.5) rotate(-135deg);
    left:0.5vw;
  }
}