JSFiddle - React, Tailwind, and code Playground

by Vijay Pancholi

HTML

<div id="bx-custom-pager">               
      <a data-slide-index="0" href="" style=""><div class="bx-item" style="" id="i1"></div></a>
      <a data-slide-index="1" href="" style=""><div class="bx-item" style="" id="i2"></div></a>
      <a data-slide-index="2" href="" style=""><div class="bx-item" style="" id="i3"></div></a>
      <a data-slide-index="3" href="" style=""><div class="bx-item" style="" id="i4"></div></a>
      <a data-slide-index="4" href="" style=""><div class="bx-item" style="" id="i5"></div></a>
      <a data-slide-index="5" href="" style=""><div class="bx-item" style="" id="i6"></div></a>
</div>

CSS

.bx-item{
    border:1px solid red;
    width: 100px;
    height: 100px;
}

JavaScript

$(document).ready(function(){ 
    $(window).on('resize', function(){
        $('.bx-item').each(function(){
            $(this).width(100/5);
        });
    });
});