JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper"><div class="content"><ul><li class="focus">0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li></ul></div></div>
    <div id="navigator">
        <div id="up" class="btn">UP</div>
        <div id="down" class="btn">DOWN</div>
        <div id="left" class="btn">LEFT</div>
        <div id="right" class="btn">RIGHT</div>
        <div id="pageinfo" class="pageinfo">Page 1 of tot 4</div>
    </div>
    <div id="test"></div>

CSS

#test{
            position: fixed;	
            top: 0px !important;
            left: 0px !important; 
            width: 200px;
            height: 200px;
            background-color: blue;
            opacity: 0.2;
        }
        body {
            margin: 0;
            padding: 0;
        }
        #wrapper {
            position: fixed;	
            top: 0px;
            left: 0px;
            width: 600px;
        }
        #navigator {
            position: absolute;	
            left: 600px;	
        }
        ul {
            list-style: none;
    margin : 0; padding:0;
        }
        li:nth-child(even) {
            background: #d80000;
        }
        li {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin: 0px;
        }
        .focus {
            background-color: yellow !important;
        }
        .btn {
            float: left;
            width: 50px;
            height: 50px;
            border: 2px gray solid;
            margin: 10px;
        }