JSFiddle - React, Tailwind, and code Playground

by Tân Nguyễn

HTML

<style>
    #rright-1 {
        display: none;
    }

    #rright-2 {
        display: none;
    }
</style>

<form>
    <ul class="pppost">
        <li class="border-upload">
            <span id="rright-1" class="rotate" title="Rotate Image"><span class="fa fa-undo">Rotate</span></span>
            <div>
                <img alt="Image 1" id="upload_wrap-1" class="portimg" src="#">
            </div>
            <div>
                <div>
                    <input id="file-1" class="file" name="pic[1]" type="file" value="Choose Image" class="file" accept="image/gif, image/jpeg, image/jpg, image/png">
                </div>
            </div>
            <input type="hidden" name="rotation[]" class="rotation-1" value="0">
        </li>

        <li class="border-upload">
            <span id="rright-2" class="rotate" title="Rotate Image"><span class="fa fa-undo">Rotate</span></span>
            <div>
                <img alt="Image 2" id="upload_wrap-2" class="portimg" src="#">
            </div>
            <div>
                <div>
                    <input id="file-2" class="file" name="pic[2]" type="file" value="Choose Image" class="file" accept="image/gif, image/jpeg, image/jpg, image/png">
                </div>
            </div>
            <input type="hidden" name="rotation[]" class="rotation-2" value="0">
        </li>
    </ul>
</form>

<script> 
    function reset(elm, prserveFileName) {
        if (elm && elm.length > 0) {
            var $input = elm;
            $input.prev('.portimg').attr('src', '').hide();


            if (!prserveFileName) {
                $($input).parent().parent().parent().find('input.file ').val("");

            }
            elm.remove();
        }
    }

    function readURL() {
        var $input = $(this);
        var $newinput =  $(this).parent().parent().parent().find('.portimg ');
        if (this.files && this.files[0]) {
            var url = URL.createObjectURL(this.files[0]);

           ...

CSS

.delete_upload {
position:absolute;margin:-5px 0 0 140px;font-size:17px;font-weight:bold;color:#0045DB;cursor:pointer  
}

.rotate{
  position:absolute;margin:25px 0 0 140px;font-size:17px;font-weight:bold;color:#0045DB;cursor:pointer
}

.border-upload{display:inline-block;background-color:#f0f0f0;border:1px solid #ccc;width:185px;padding:8px 8px 8px 7px;margin:8px 3px 0 0;vertical-align:bottom;zoom:1}

      img.portimg {
            display: none;
            max-width: 170px;
            max-height: 90px;
            margin:55px 0 55px 5px;
            float:left;
            border:1px solid #aaa;
            padding:3px;
            background-color:#fff;
            vertical-align:top;
            
      }