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"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li><a href="">5</a></li>
  <li><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 ?
  }
}