JSFiddle - React, Tailwind, and code Playground

by dkunin

HTML

<ul class="hud">
<li><span class='title'>Title</span></li>
<li><span class='time'>Время</span><br><br><span class='miss'>Миссия</span></li>
<li><span class='exp'>Очки</span></li>
<li>Гаджет</li>
</ul>

CSS

body {
    margin: 15px;
    background-color: #fff;
    font-family: Arial, Geneva, Helvetica;
}

h1 {
    text-align: center;
    font-size: 30px;
    color: #2b2b2b;
}

.hud li{
    
    list-style:none;
    float:left;
    display:block;
    border:1px solid grey; 
    line-height: 4em;
    padding: 10px 15px;
text-align:center;

    }
    
.hud li:first-child{
    width:60%;
    }

.hud li:nth-child(2){
    line-height: 1.6em;
    padding: 3px 15px;
    width:10%;
    }
    

.hud li:nth-child(3){

    width:10%;
    }
    

.hud li:nth-child(4){

    width:10%;
    }