JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!-- my pagination -->

<a href="#" class="left"> <</a>
<div>
    <a class="num" href="#">1</a>
    <a class="num" href="#">2</a>
    <a class="num" href="#">3</a>
    <a class="num" href="#">4</a>
    <a class="num" href="#">5</a>
    <a class="num" href="#">6</a>
    <a class="num" href="#">7</a>
    <a class="num" href="#">8</a>
    <a class="num" href="#">9</a>
    <a class="num active" href="#">10</a>
    
</div>
<a href="#" class="right"> > </a>

CSS

a {
       display: inline-block;
    	width: 25px;
    	height: 25px;
    	border: 1px solid black;
	}
	a.active {
    	background-color: blue;
	}
	.left, .right, div{
 		display: inline-block;   
	}

@media only screen and (min-width:320px) and (max-width:568px) {
    body{
    	 background-color: red;   
    }

    .num {
    	display: none;
    }

    a.active {
    	display: inline-block;
    }
    /** three selectors **/
    a.active + a, a.active + a + a{
    	display: inline-block !important;
    }

     a.active:last-child {
    	display: inline-block;
    }

    a:nth-last-child(-n+3){
    	display: inline-block;
    }

    a.active ~ a:nth-last-child(-n+3){
    	display: none;
    }

}
@media only screen and (min-width:568px) and (max-width:1200px) {
    body{
     background-color: green;   
    }
}