JSFiddle - React, Tailwind, and code Playground

by Arnold Daniels

HTML

<div class="mycontainer">
    <div class="mycarousel">
        <img class="arrow-prev" src="http://patrickmchugh.com/images/leftArrow.png" alt="previous" />
        <img class="arrow-next" src="http://patrickmchugh.com/images/rightArrow.png" alt="next" />
        <img src="http://patrickmchugh.com/images/fashion-1.jpg" alt="fashion-photo" />
    </div>
</div>

CSS

.mycontainer {
    text-align: center;
}

.mycarousel {
    position: relative;
    padding: 0 25px;
    display: inline-block;
    max-width: 100%;
}

.mycarousel img {
   max-width: 100%;    
}
.arrow-prev {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -7px;
}

.arrow-next {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -7px;
}