JSFiddle - React, Tailwind, and code Playground

HTML

<div class="c-wrapper">
        <div class="header">
        <div class="alfavit">
            <ul>
                <li>А
                    <ul>
                        <li><a href="#">арбуз</a></li>
                        <li><a href="#">арсенал</a></li>
                        <li><a href="#">анаконда</a></li>
                        <li><a href="#">абак</a></li>
                        <li><a href="#">арфа</a></li>
                        <li><a href="#">алфавит</a></li>
                        <li><a href="#">аддон</a></li>
                        <li><a href="#">аспект</a></li>
                        <li><a href="#">астма</a></li>
                        <li><a href="#">артикул</a></li>
                        <li><a href="#">амперметр</a></li>
                        <li><a href="#">ампир</a></li>
                        <li><a href="#">альфа</a></li>
                        <li><a href="#">акция</a></li>
                        <li><a href="#">анимация</a></li>
                        <li><a href="#">акация</a></li>
                        <li><a href="#">альбинос</a></li>
                        <li><a href="#">арба</a></li>
                        <li><a href="#">армия</a></li>
                        <li><a href="#">анапест</a></li>
                        <li><a href="#">амбал</a></li>
                        <li><a href="#">адажио</a></li>
                        <li><a href="#">арабика</a></li>
                        <li><a href="#">аркебузир</a></li>
                    </ul>
                </li>
                <li>Б</li>
                <li>В</li>
                <li>Г</li>
                <li>Д</li>
                <li>Е</li>
                <li>Ж</li>
                <li>З</li>
                <li>И</li>
                <li>Й</li>
                <li>К</li>
                <li>Л</li>
                <li>М</li>
                <li>Н</li>
                <li>О</li>
                <li>П</li>
                <li>Р</li>
               ...

CSS

body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,th,td { margin:0; padding:0;}

html{
height: 100%; 
overflow:auto;
}

body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background: url(images/fon.png);
font-size:14px;
height:100%
}

h1{
margin:10px;
float:left;
}

.alfavit{
display:block;
margin:0 auto;
width:600px;
padding-top:20px;
font-size:16px;
}

.alfavit ul{
list-style:none;
}

.alfavit li{
display:inline-block;
position:relative;
text-decoration:underline;
padding:0px 2px;
}

.alfavit li ul{
position:absolute;
top:19px;
left:-5px;
display:none;
font-size:12px;
background:#eee;
width:250px;
white-space: nowrap;
box-shadow: 0 1px 3px #ccc;
 -moz-box-shadow: 0 1px 3px #ccc;
 -webkit-box-shadow: 0 1px 3px 2px #ccc;
}

.alfavit li:hover ul{
display:block;
}

.alfavit li ul li{
float: left;
vertical-align:top;
padding:0px;
width:50%;
}

.alfavit li ul li a{
display:block;
color:#000;
padding:3px 5px 3px 2px;
white-space:normal;

}
.alfavit li ul li a:hover{
background:#fff;
color:#ff0000;
}