JSFiddle - React, Tailwind, and code Playground

by Eric Abutaliev

HTML

<div id="top">
    <div class="logo"></div>
    <div class="rightSide">
        <p class="phone">+7 (495) 783 48 36</p>
        <p class="welcome">Добро пожаловать</p>
        <button class="exit">Выход</button>
    </div>
</div>
<div id="menu">
    <h3><a href="#">Общая информация</a></h3>
    <div>
        <span class="point">Памятка заемщику</span>
        <span class="point">Способы оплаты</span>
        <span class="point active">Новости</span>
    </div>
    
    <h3><a href="#">Действующие займы</a></h3>
    <div>
        <span class="point">А-01202/АЗ</span>
    </div>
    
    <h3><a href="#">Закрытые займы</a></h3>
    <div>
        <span class="point">Т-00302/АЗ</span>
        <span class="point">А-00602/АЗ</span>
    </div>
</div>
<div id="area">
    <h4>Новости</h4>
</div>

CSS

body{
    width: 900px;
    margin:0 auto;
}
div{
    background: white;
}
#main{
    background: white;
}
#top{
    height: 90px;
    border-bottom: 1px solid grey;
    padding: 10px;
    clear: both;
}
#top .logo{
    margin-left: 10px;
    float: left;
    width: 160px;
    height: 100px;
    background: url(http://www.aecgroup.ru/bitrix/templates/simple/images/logo_aek.jpg) no-repeat;
    background-size: contain;
}
#top .rightSide{
    float: right;
    text-align: right;
    padding-right: 10px;
}
#top .rightSide .phone{
    margin: 0;
    font-style: oblique;
    text-decoration: underline;
}
#top .rightSide .welcome{
    margin: 2.5px 0;
}
#top .rightSide .exit{
    margin-top: 5px;
    padding: 2.5px 20px;
}
#menu{
    float: left;
    width: 300px;
    padding: 5px;
    padding-bottom: 20px;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
    border-left: 1px solid grey;
}
#menu h3{
    margin: 0;
    padding: 0 5px 0 25px;
    font-size: 1em;
}
#menu a{
    color: #002878;
}
#menu div{
    padding: 0;
}
#menu .point{
    display: block;
    margin: 2.5px 0;
    padding: 0 5px 0 25px; 
    cursor: pointer;
}
#menu .point::before {
     content: "» ";
}
#menu .point:hover{
    text-decoration: underline;
}
#menu .active{
    text-decoration: underline;
}
#area{
    float: left;
    width: 567px;
    padding: 2.5px 10px;
}
#area h4{
    margin: 0;
}

JavaScript

$(function() {
    $( "#menu" ).accordion({
        collapsible: true,
        heightStyle: "content",
        active:false
    });
    $( "#menu" ).accordion("activate", 0);
    $("#menu").prepend("Меню");
});