JSFiddle - React, Tailwind, and code Playground

by Artem Pryanishnikov

HTML

<div class="footerline">
<div class="footerup">
<nav class="footermenu"><ul><li class="parent"><span>Защита информации</span></li><li><a href="/katalog/zawita-informacii/skzi-mskey-k/">СКЗИ «MS_KEY K»</a></li><li><a href="/katalog/zawita-informacii/schityvateli-smart-kart/">Считыватели Смарт-карт</a></li><li><a href="/katalog/zawita-informacii/zawita-po-ot-kopirovaniya/">Защита ПО от копирования</a></li><li><a href="/katalog/zawita-informacii/usb-security/">USB-Security</a></li></ul><ul><li class="parent"><span>Кассовое оборудование</span></li><li><a href="/katalog/kassovoe-oborudovanie/online-kassy/">Онлайн-кассы</a></li><li><a href="/katalog/kassovoe-oborudovanie/pos-terminaly/">POS-терминалы</a></li><li><a href="/katalog/kassovoe-oborudovanie/pos-printery/">POS - Принтеры</a></li></ul><ul><li class="parent"><span>Мобильная касса MSPOS-K</span></li><li><a href="http://multisoft.ru/onlajn-kassy/mts-kassa/">МТС Касса</a></li><li><a href="http://multisoft.ru/onlajn-kassy/modulkassa3/">МодульКасса</a></li><li><a href="http://multisoft.ru/onlajn-kassy/bifitkassa/">БИФИТ.КАССА</a></li><li><a href="http://multisoft.ru/onlajn-kassy/microinvest-axis-cloud/">Axis Cloud</a></li><li><a href="http://multisoft.ru/onlajn-kassy/grotemexpress/">GROTEM/Express</a></li><li><a href="http://multisoft.ru/onlajn-kassy/ireca-kur-er/">iRECA: Курьер</a></li><li><a href="http://multisoft.ru/onlajn-kassy/litebox/">LiteBox</a></li><li><a href="http://multisoft.ru/onlajn-kassy/qasl/">Qasl</a></li><li><a href="http://multisoft.ru/onlajn-kassy/kontur-market/">Контур.Маркет</a></li></ul><ul><li class="parent"><span>Чековые принтеры</span></li><li><a href="/katalog/chekovye-printery/star-micronics/">Star Micronics</a></li></ul><ul><li class="parent"><span>Автоматизация</span></li><li><a href="http:///avtomatizaciya/programmy-dlya-avtomatizacii/microinvest/">Комплексные решения</a></li><li><a href="/publikacii/avtomatizaciya/programmy-dlya-avtomatizacii/">Программы для...

CSS

.footerline{
   background: #2b2b2b;
   max-width:1920px;
   min-width:1200px;
   height:430px;
}
.footerup{
    width: 1200px;
    margin: 0 auto;
    display:block;
}

.footermenu {
    padding: 20px 0;
    display:block;
}
.footerline .footerup .footermenu ul:first-child {
    background: none;
}
.footerline .footerup .footermenu ul {
    height:320px;
    float: left;
    width: 200px;
    background: url(../img/bg-9.png) 0 0 repeat-y;
}
.footerline .footerup .footermenu li {
    display: block;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.footerline .footerup .footermenu li {
    margin: 10px 30px 0 30px;
}
.footerline .footerup .footermenu li a {
    line-height: 16px;
    color: #b7b7b7;
}
.footerline .footerup .footermenu li span {
    font-size: 18px;
    line-height: 20px;
    color: #59aeff;
}
.footer_phone_block {
    padding: 0 0 21px 0;
    display:block;
}
.number2{
  display: block;
    float: left;
    height: 42px;
    margin: 0 0 0 12px;
    padding: 0 0 0 15px;
    line-height: 42px;
    font-size: 30px;
    font-family: 'pf_beausans_prothin', Arial, sans-serif;
    color: #5badff;
}