JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div class="wrapper">
        <ul>
            <li class="logo"><a href="main.html"><img class="pic-logo" src="https://sun3-12.userapi.com/KEyNg183KzfZDY3pS48uzIjiUUWl1gu0KvUN7A/O3SuBhAUjFI.jpg"></a></li>
            <li><img class='pic-search'><input class="search" placeholder="Поиск по мероприятиям"></li>
            <li class="sign-in"><a href="#" class="fork">Вход</a></li>
        </ul>
    </div>
</header>

CSS

.wrapper {
    max-width:1260px;
    margin:0 auto;
    height:auto;
}

header {
    height:72px;
    width:100%;
    background: #FFFFFF;
    box-shadow: 0 1px 28px rgba(0, 0, 0, 0.25);
}

header .wrapper ul {
    display: flex;
    justify-content: space-around;
    line-height: 72px;
}

.sign-in,
.search {
    font-size:16px;
}

.search {
    color: #767;
    width: 448px;
    height: 40px;
    background: #EDEDED;
    border-radius: 70px;
    border:1px solid #EDEDED;
    text-align:center;
    outline:none;
    margin-right:100px;
}

a {
    text-decoration: none;
}

.sign-in a {
    color:#000;
    display:block;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid #EDEDED;
    width:94px;
    height:40px;
    border-radius: 22px;
    margin:12px auto;
    line-height:36px;
    text-align: center;
}


.sign-in a:hover {
    background: #EDEDED;
}

.sign-in a:active {
    background: #E3E3E3;
}

.search:active,
.search:focus {
    text-align:left;
    text-indent:40px;
}

a .pic-logo {
    position:relative;
    top:5px;
    left:10px;
}

ul {
    padding:0;
    margin:0;
    list-style:none;
}

body {
    margin:0;
    font-family: Open Sans;
    background:rgba(50,60,70,.7);
}

@media (max-width:1200px) {
    .wrapper {
        max-width:1024px;
    }
}

@media (max-width:1023px) {
    .wrapper {
        max-width:768px;
    }
}

@media (max-width:767px) {
    .wrapper {
        max-width:420px;
    }
}

@media (max-width:419px) {
    .wrapper {
        max-width:340px;
    }
}

@media (max-width:339px) {
    .wrapper {
        max-width:none;
    }
}