JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<p>
For tablets and above
</p>
<ul class="pagination">
  <li class="arrow unavailable"><a href="">&laquo;</a></li>
  <li class="current pg"><a href="">1</a></li>
  <li class="pg"><a href="">2</a></li>
  <li class="pg"><a href="">3</a></li>
  <li class="pg"><a href="">4</a></li>
  <li class="pg"><a href="">5</a></li>
  <li class="pg"><a href="">6</a></li>
  <li class="arrow"><a href="">&raquo;</a></li>
</ul>
</div>
<div>



<p>
For small screen devices
</p>
<ul class="pagination">
  <li class="arrow unavailable"><a href="">&laquo;</a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li class="arrow"><a href="">&raquo;</a></li>
</ul>
</div>

CSS

li {
  list-style: none;
  display: inline-block;
  
  @media only screen and (max-width: 500px) {
    // how to apply css ?
  }
}

JavaScript

if(screen.width < 500){
  var list = document.getElementsByClassName("pg");
  for(var i = 2; i < list.length; i++){
     list[i].style.display = 'none';
  }
 }