JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<ul class="arrows">
    <li id="l"><a href="#"><i class="fa fa-angle-left"></i></a></li>
    <li id="u"><a href="#"><i class="fa fa-angle-up"></i></a></li>
    <li id="r"><a href="#"><i class="fa fa-angle-right"></i></a></li>
    <li id="d"><a href="#"><i class="fa fa-angle-down"></i></a></li>
    <li id="n"><a href="#">1</a></li>
</ul>

CSS

* {font-family: Segoe UI;}
.arrows {list-style: none; margin: 0; padding: 0; position: relative; border: 1px solid #9cf; width: 170px; height: 170px; border-radius: 5px;}
.arrows li {list-style: none; margin: 0; padding: 0; position: absolute; width: 50px; height: 50px;}
.arrows li a {display: block; text-decoration: none; background-color: #9cf; color: #fff; font-size: 1.5em; width: 50px; height: 50px; text-align: center; line-height: 50px; border-radius: 5px;}
#l {left: 5px; top: 60px;}
#u {left: 60px; top: 5px;}
#r {right: 5px; top: 60px;}
#d {left: 60px; bottom: 5px;}
#n {left: 60px; top: 60px;}