JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="menu-cnt">
    
    
    <div class="menu-inner wrapper">
        
        
        <div class="title">
            <div class="pic">
                тут<br/>
                большая<br/>
                картинка
            </div>
        </div>
        
        <div class="menu">
            <a href="#">hello</a>
            <a href="#">hello</a>
            <a href="#">hello</a>
            <a href="#">hello</a>
        </div>
        
    </div>
    
    
</div>

CSS

body {
    background: yellow;
}

.wrapper {
    width: 600px;
    margin: 0 auto;
}

.menu-inner {
    position: relative;
    height: 30px;
}

.menu-inner:before {
    content: '';
    display: block;
    position: absolute;
    top: 0px; right: 100%;
    width: 2000px;
    height: 30px;
    background: blue;
}

.menu-inner:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px; left: 100%;
    width: 2000px;
    height: 30px;
    background: blue;
}

.menu-cnt {
    padding-top: 80px;
    display: block;
    overflow: hidden;
}

.title {
    position: relative;
    float: left;
    width: 100px;
    height: 30px;
}

.title .pic {
    position: absolute;
    bottom: 0px; left: 0px;
    width: 100%;
    font-size: 25px;
}

.menu {
    float: right;
    width: 500px;
    height: 30px;
    background: blue;
    text-align: center;
}

.menu a {
    display: inline-block;
    line-height: 30px;
    margin: 0px 1px;
    color: #fff;
}