JSFiddle - React, Tailwind, and code Playground
HTML
<div id="footer" class="pagingCss">
<a href="/CompanySearch/Home/Results?page=1">
<span class="whiteBox"><<</span>
</a>
<a href="/CompanySearch/Home/Results?page=5">
<span class="whiteBox"><</span>
</a>
<a href="/CompanySearch/Home/Results?page=1">
<span class="blackBox">1</span>
</a>
<a href="/CompanySearch/Home/Results?page=2">
<span class="blackBox">2</span>
</a>
<a href="/CompanySearch/Home/Results?page=3">
<span class="blackBox">3</span>
</a>
<a href="/CompanySearch/Home/Results?page=4">
<span class="blackBox">4</span>
</a>
<a href="/CompanySearch/Home/Results?page=5">
<span class="blackBox">5</span>
</a>
<span class="selected">6</span>
<a href="/CompanySearch/Home/Results?page=7">
<span class="blackBox">7</span>
</a>
<a href="/CompanySearch/Home/Results?page=8">
<span class="blackBox">8</span>
</a>
<a href="/CompanySearch/Home/Results?page=9">
<span class="blackBox">9</span>
</a>
<a href="/CompanySearch/Home/Results?page=10">
<span class="blackBox">10</span>
</a>
<a href="/CompanySearch/Home/Results?page=7">
<span class="whiteBox">></span>
</a>
<a href="/CompanySearch/Home/Results?page=10">
<span class="whiteBox">>></span>
</a>
</div>
CSS
body {
font-family: Calibri;
background-color:
#D8D8D8;
margin-top: 0px;
text-decoration:none;
}
#footer:not([href]) {
letter-spacing: 0px;
}
#footer {
text-align: center;
margin-top: 10px;
}
.pagingCss {
font-size: 13px;
}
.whiteBox {
background-color:
white;
color:
black;
padding-right: 7px;
padding-left: 7px;
padding-top: 4px;
padding-bottom: 4px;
text-decoration: none;
margin-top: 10px;
letter-spacing: 0px;
}
.blackBox,
.selected {
background-color:
black;
color:
white;
padding-right: 7px;
padding-left: 7px;
padding-top: 4px;
padding-bottom: 4px;
text-decoration: none;
margin-top: 10px;
letter-spacing: 0px;
}
.selected {
background: transparent;
color:#000;
}
.pagingCss a {
font-size: 13px;
color: white;
text-decoration:none;
}