JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a class="ls-nav-prev" href="#" style="visibility: visible;"></a>
<a class="ls-nav-next" href="#" style="visibility: visible;"></a>
<div>
<div class="ls-bottom-nav-wrapper">
<span class="ls-bottom-slidebuttons">
<a href="#" class=""></a>
<a href="#" class="ls-nav-active"></a>
</span>
</div>
</div>

CSS

.ls-bottom-nav-wrapper {
  text-align:right;
}
.ls-nav-prev {
  position:absolute;
  right:87px;
background-color:yellow;
}
  .ls-nav-prev:before {
    content: "\f104";
      display: block;
      font-family: 'fontawesome';
      opacity: 0.7;
      color: #222;
      font-size: 40px;
      margin-left: 18px;
  }
.ls-nav-next {
  position:absolute;
  right:0;
background-color:yellow;
}
  .ls-nav-next:before {
    content: "\f105";
      display: block;
      font-family: 'fontawesome';
      opacity: 0.7;
      color: #222;
      font-size: 40px;
      margin-right: 18px;
  }
.ls-bottom-slidebuttons {
    position:absolute;
    right:32px;
    background-color:yellow;
    width:auto;
    padding:12px;
}
.ls-bottom-slidebuttons>a:before {
    content: "\f111";
    display: inline-block;
    font-family: 'fontawesome';
}