JSFiddle - React, Tailwind, and code Playground

by Max Sinev

HTML

<tr>
    <td style="padding: 15px 0;">
        <div style="width: 50%; display: inline-block;clear: both;">
            <div class="mouse_move"></div>
            <div class="hk_desc for_mouse">Повернуть камеру</div>
        </div>
        <div style="display: inline-block">
            <div class="mouse_move_right_button" style="position: relative">
                <div class="hold">(удерживать)</div>
            </div>
            <div class="hk_desc for_mouse">Повернуть персонажа</div>
        </div>
    </td>	
</tr>
<tr>
    <td style="padding: 15px 0;">
        <div style="width: 50%; display: inline-block;margin-left: 7px;">
            <div class="mouse_left_button"></div>
            <div class="hk_desc for_mouse_2">Атака</div>
        </div>
        <div style="display: inline-block">
            <div class="mouse_right_button" style="position: relative">
                <div class="hold">(удерживать)</div>
            </div>
            <div class="hk_desc for_mouse_2">Блок</div>
        </div>
    </td>	
</tr>
<tr>
    <td style="border: none">
        <div class="small_button">A</div>
        <div class="small_button">D</div>
        <img class="plus" src="img/plus.png" style="margin-left: 10px;">
        <div class="mouse_right_button" style="float: none; margin-top: -35px; margin-bottom: -16px; margin-left: 10px; margin-right: 5px; position: relative">
            <div class="hold">(удерживать)</div>
        </div>
        <div class="hk_desc">Стрейф влево, вправо</div>
    </td>	
</tr>

CSS

.mouse_move
{
    width: 45px;
    height: 60px;
    background: url(../img/mouse.png);
    color: #820504;
    display: inline-block;
    margin: 0 15px 0 2px;
    float: left;
}

.mouse_move_right_button
{
    width: 45px;
    height: 60px;
    background: url(../img/mouseRBMV.png);
    color: #820504;
    display: inline-block;
    margin: 0 15px 0 2px;
    float: left;
}

.mouse_right_button
{
    width: 31px;
    height: 44px;
    background: url(../img/mouseRB.png);
    color: #820504;
    display: inline-block;
    margin: 0 15px 0 2px;
    float: left;
}

.mouse_left_button
{
    width: 31px;
    height: 44px;
    background: url(../img/mouseLB.png);
    color: #820504;
    display: inline-block;
    margin: 0 15px 0 2px;
    float: left;
}

.hk_desc.for_mouse
{
    display: inline-block;
    margin-top: 22px;
}

.hk_desc.for_mouse_2
{
    display: inline-block;
    margin-top: 13px;
    margin-left: 13px;
}

.hold
{
    position: absolute;
    bottom: -13px;
    font-size: 11px;
    left: 50%;
    width: 71px;
    margin-left: -35px;
}