JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="prev">Prev Image</a>
<a href="#" id="next">Next Image</a>
<br>
<a id="preview" target="_blank">
    <img style="width=100%;" alt="preview" id="preview_img" />    
</a>
    <br>
<input type="text" id="curr">

CSS

html, body, div, a {
    padding:0;
    margin:0;
    text-align:center;
}

#next, #prev {
    height:50px;
    background: rgb(204, 0, 0);
    color: white;
    display:inline-block;
    padding:10px;
    line-height:50px;
    margin:10px;
    margin-right:0;
    margin-bottom:30px;
    border-radius:4px;    
}

#preview {
    display:inline-block;
        box-shadow: inset 0 0 0 1px white, inset 1px 1px 1px 2px #666;

}

#preview_img {
    max-width:100%;    
}

JavaScript

var imgs =...