JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="buttons-container">
    <div id="prev" class="prev">
        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 268.832 268.832" style="enable-background:new 0 0 268.832 268.832;" xml:space="preserve"><g><path fill="white" d="M265.171,125.577l-80-80c-4.881-4.881-12.797-4.881-17.678,0c-4.882,4.882-4.882,12.796,0,17.678l58.661,58.661H12.5c-6.903,0-12.5,5.597-12.5,12.5c0,6.902,5.597,12.5,12.5,12.5h213.654l-58.659,58.661c-4.882,4.882-4.882,12.796,0,17.678c2.44,2.439,5.64,3.661,8.839,3.661s6.398-1.222,8.839-3.661l79.998-80C270.053,138.373,270.053,130.459,265.171,125.577z"></path></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
    </div>
    <div id="next" class="next">
        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 268.832 268.832" style="enable-background:new 0 0 268.832 268.832;" xml:space="preserve"><g><path fill="white" d="M265.171,125.577l-80-80c-4.881-4.881-12.797-4.881-17.678,0c-4.882,4.882-4.882,12.796,0,17.678l58.661,58.661H12.5c-6.903,0-12.5,5.597-12.5,12.5c0,6.902,5.597,12.5,12.5,12.5h213.654l-58.659,58.661c-4.882,4.882-4.882,12.796,0,17.678c2.44,2.439,5.64,3.661,8.839,3.661s6.398-1.222,8.839-3.661l79.998-80C270.053,138.373,270.053,130.459,265.171,125.577z"></path></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
    </div>
    <div class="colors">
        <div class="color-button"></div>
        <div class="color-button active"></div>
        <div class="color-button"></div>
        <div class="color-button"></div>
        <div class="color-button"></div>
    </div>
</div>

CSS

body {
    margin: 0;
}
* {
    box-sizing: border-box;
}
.buttons-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 40px 0;
}
.buttons-container #prev , .buttons-container #next {
    cursor: pointer;
    width: 100px;
    height: 100px;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
}
.buttons-container #prev svg {
    transform: rotate(180deg);
}
.buttons-container #prev {
    left: 0;
}
.buttons-container #next {
    right: 0;
}
.buttons-container .colors {
    display: flex;
}
.buttons-container .colors .color-button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 20px;
    position: relative;
    background: red;
    cursor: pointer;
}
.buttons-container .colors .color-button:after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 2px solid black;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    opacity: 0;
    transition: 0.6s;
}
.buttons-container .colors .color-button.active:after {
    opacity: 1;
}
@media (max-width: 767px){
    .buttons-container #next {
        left: 120px;
        right: unset;
    }
    .buttons-container .colors {
        padding-left: 100px;
    }
    .buttons-container #prev, .buttons-container #next {
        width: 64px;
        height: 64px;
    }
}