JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "firenze"> 
<div class = "baltimore">
    <ul style="list-style-type: none" id = "dis" class = "como">    
        <li id = "delta" class = "delta"></li>
        <li id = "yankee" class = "yankee"></li>
        <li id = "uniform" class = "uniform"></li>
        <li id = "hotel" class = "hotel"></li>
        <li id = "oscar" class = "oscar"></li>
        <li>Power Ball:</li>
        <li id="golf" class = "golf"></li>
    </ul>

        <span class = "echo1"><input value="Generate" type="button" class = "foxtrot1" id="foxtrot1"></span>


</div>

</div>

CSS

.firenze {height: 100px; width: 300px;} .baltimore {border-radius: 11px;}   
   .baltimore{padding-left: 11px !important; padding-top: 11px !important} 
   .baltimore{height: 133px; width: 387px !important;} 
   .baltimore{border: solid 1px black !important;}  
   .como {border: solid 1px black !important;} 
   .como {height: 53px !important; width: 343px !important;} 
   .como {padding-left: 33px !important; padding-top: 18px !important}   
   .foxtrot1 {width: 130px !important;} .foxtrot1 {text-align: center !important;}    
   .echo1 {padding-left: 111px !important; padding-top: 7px !important; }  
   .jessie {padding-top: 63px !important;}   
   .como li {display: inline-block !important; vertical-align: top !important; float: left !important;}  
   .como li {margin: 3 !important;}  .bravo {padding-left: 1px !important;} .bravo {font-size: 18px;} 
   .delta {border: solid 1px black !important;} .delta {height: 13px; width: 27px !important;} 
   .delta {padding-bottom: 13px;}  .tango {padding-left: 1px !important;} .tango {font-size: 18px;} 
   .yankee {border: solid 1px black !important;} .yankee {height : 13px !important; width: 27px !important;} 
   .yankee {padding-bottom: 13px;}  .sierra {padding-left: 1px !important;} .sierra {font-size: 18px;} 
   .uniform {border: solid 1px black !important;} .uniform {height: 13px !important; width: 27px !important;} 
   .uniform {padding-bottom: 13px;}  .lima {padding-left: 1px !important;} .lima {font-size: 18px;} 
   .hotel {border: solid 1px black !important;} .hotel {height: 13px !important; width: 27px !important;} .hotel {padding-bottom: 13px;}  
   .romeo {padding-left: 1px !important;} .romeo {font-size: 18px;} .oscar {border: solid 1px black !important;} 
   .oscar {height: 13px !important; width: 27px !important;} .oscar {padding-bottom: 13px;}  .zulu {padding-left: 1px !important;} 
   .zulu {font-size: 18px;} .golf {border: solid 1px black !important;} .golf {height: 13px !important; width: 27px...

JavaScript

$("#foxtrot1").click(function(){  
        $("#delta").html(randomToTwo());
        $("#yankee").html(randomToTwo());
        $("#uniform").html(randomToTwo()); 
        $("#hotel").html(randomToTwo()); 
        $("#oscar").html(randomToTwo());
        $("#golf").html(randomToTwo());
});

function randomToTwo() {    
    var num=Math.floor(Math.random() * 11);
    console.log("num "+num);
    return num;
}