JSFiddle - React, Tailwind, and code Playground

by Sparrow Squire

HTML

<div class="container">
    
    <button class="prev"></button>
    
    <button class="next"></button>
    
</div>

CSS

.container {
    display: block;
    background: black;
    width: 100%;
    height: 90px;
    position: relative
}

button {
    background: #fff;
    width: 39px;
    height: 39px;
    position: absolute;
    top: 50%;
    margin-top: -19.5px;
    display: block;
    outline: none;
    border: none;
    padding: 3px !important;
    border-radius: 50%
}

button::before {
    background:blue;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-family: FontAwesome;
    color: #fff;
    font-size: 25px;
    line-height: 36px
}

button.prev {
    left: 10px
}

button.next {
    right: 10px
}

button.prev::before {
    content:"\f053"
}

button.next::before {
    content:"\f054"
}