JSFiddle - React, Tailwind, and code Playground

by oroce

HTML

<ul class="list">
<li>listElem_0</li>
    <li>listElem_1</li>
    <li>listElem_2</li>
    <li>listElem_3</li>
    <li>listElem_4</li>
    <li>listElem_5</li>
    <li>listElem_6</li>
    <li>listElem_7</li>
    <li>listElem_8</li>
    <li>listElem_9</li>
    <li>listElem_10</li>
    <li>listElem_11</li>
    <li>listElem_12</li>
    <li>listElem_13</li>
    <li>listElem_14</li>
    <li>listElem_15</li>
    <li>listElem_16</li>
    <li>listElem_17</li>
    <li>listElem_18</li>
    <li>listElem_19</li>
    <li>listElem_20</li>
    <li>listElem_21</li>
    <li>listElem_22</li>
    <li>listElem_23</li>
    <li>listElem_24</li>
    <li>listElem_25</li>
    <li>listElem_26</li>
    <li>listElem_27</li>
    <li>listElem_28</li>
    <li>listElem_29</li>
    <li>listElem_30</li>
    <li>listElem_31</li>
    <li>listElem_32</li>
    <li>listElem_33</li>
    <li>listElem_34</li>
    <li>listElem_35</li>
    <li>listElem_36</li>
    <li>listElem_37</li>
    <li>listElem_38</li>
    <li>listElem_39</li>
    <li>listElem_40</li>
    <li>listElem_41</li>
    <li>listElem_42</li>
    <li>listElem_43</li>
    <li>listElem_44</li>
    <li>listElem_45</li>
    <li>listElem_46</li>
    <li>listElem_47</li>
    <li>listElem_48</li>
    <li>listElem_49</li>
    <li>listElem_50</li>
    <li>listElem_51</li>
    <li>listElem_52</li>
    <li>listElem_53</li>
    <li>listElem_54</li>
    <li>listElem_55</li>
    <li>listElem_56</li>
    <li>listElem_57</li>
    <li>listElem_58</li>
    <li>listElem_59</li>
    <li>listElem_60</li>
    <li>listElem_61</li>
    <li>listElem_62</li>
    <li>listElem_63</li>
    <li>listElem_64</li>
    <li>listElem_65</li>
    <li>listElem_66</li>
    <li>listElem_67</li>
    <li>listElem_68</li>
    <li>listElem_69</li>
    <li>listElem_70</li>
    <li>listElem_71</li>
    <li>listElem_72</li>
    <li>listElem_73</li>
    <li>listElem_74</li>
    <li>listElem_75</li>
    <li>listElem_76</li>
    <li>listElem_77</li>
    <li>listElem_78</li>
   ...

CSS

.list li{
    border:solid 1px #ff5e99
}
li.activeElem{
    background-color:black;
    color: #ff5e99;
}

JavaScript

$("li").click(function(){
    if( $( this ).hasClass("activeElem") ) return false;
    
    $(".activeElem").removeClass("activeElem");
    $( this ).addClass("activeElem")
});
var keyCode = jQuery.ui.keyCode;
$( document ).bind("keydown", function(e){
    switch( e.which ){
        case keyCode.UP:
            var activeElem = $(".activeElem");
            if( !activeElem.length ){
                $("li:first").addClass("activeElem");   
            }
            else{
                activeElem.prev().addClass("activeElem").end().removeClass("activeElem")
            }
            // return false;
            break;
        case keyCode.DOWN:
            
            var activeElem = $(".activeElem");
            if( !activeElem.length ){
                $("li:first").addClass("activeElem");   
            }
            else{
                activeElem.next().addClass("activeElem").end().removeClass("activeElem")
            }
           // return false;
            break;
    }
    console.log( e );
});