JSFiddle - React, Tailwind, and code Playground

by katerina5452

HTML

<form class="search__form" method="get" action="https://echo.htmlacademy.ru">
                     <a href="#" class="search__name"> Поиск гостиницы в Седоне </a>
                     
                     <div class="search__check-in">
                        <label class="search__label" for="check-in">Дата заезда:</label>
                        <input class="search__input--long" type="text" name="check-in" placeholder="24 апреля 2017" id="check-in">
                        <svg class="search__calendar" xmlns="http://www.w3.org/2000/svg" width="21" height="22" viewBox="0 0 21 22"><path d="M19.251 2.025h-2.845V.648c0-.381-.294-.689-.656-.689-.363 0-.656.308-.656.689v1.377h-3.938V.648c0-.381-.294-.689-.655-.689-.363 0-.657.308-.657.689v1.377H5.906V.648c0-.381-.294-.689-.656-.689-.363 0-.657.308-.657.689v1.377H1.75C.784 2.025 0 2.847 0 3.862v16.302C0 21.179.784 22 1.75 22h17.501c.966 0 1.749-.821 1.749-1.836V3.862c0-1.015-.783-1.837-1.749-1.837zm.437 18.139a.448.448 0 0 1-.437.459H1.75a.45.45 0 0 1-.438-.459V3.862a.45.45 0 0 1 .438-.459h2.844v1.378c0 .381.294.689.657.689.362 0 .656-.308.656-.689V3.403h3.938v1.378c0 .381.294.689.657.689.361 0 .655-.308.655-.689V3.403h3.938v1.378c0 .381.293.689.656.689.362 0 .656-.308.656-.689V3.403h2.845c.241 0 .437.206.437.459v16.302z"/><path  d="M4.594 8.225h2.625v2.066H4.594zM4.594 11.668h2.625v2.067H4.594zM4.594 15.112h2.625v2.066H4.594zM9.188 15.112h2.625v2.066H9.188zM9.188 11.668h2.625v2.067H9.188zM9.188 8.225h2.625v2.066H9.188zM13.781 15.112h2.625v2.066h-2.625zM13.781 11.668h2.625v2.067h-2.625zM13.781 8.225h2.625v2.066h-2.625z"  fill="a9a9a9"/></svg>
                  </div>
                     <div class="search__out">
                        <label class="search__label" for="check-out">Дата выезда:</label>
                        <input class="search__input--long" type="text" name="check-out" placeholder="4 июля 2017" id="check-out">
                        <svg class="search__calendar" xmlns="http://www.w3.org/2000/svg"...

CSS

.search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.search__container {
    margin-top: 41px;
    margin-bottom: 34px;
}
.search__container-form {
    width: 570px;
    height: 480px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    z-index: 100;
    
    
      
}
.search__title {
    font-size: 30px;
    font-weight: bold;
    line-height: 24px;
    text-align: center;
    margin-bottom: 30px;
}
.map__picture {
    position: absolute;
    z-index: -1;
    top: 85px;
    
   

}
.search__name {
    font-size: 21px;
    font-weight: bold;
    line-height: 26px;
    text-align: center;
    color: #ffffff;
    background-color: #766357;
    padding-left: 140px;
    padding-right: 140px;
    padding-bottom: 30px;
    padding-top: 30px;
}
.search__name:hover {
    background-color: #604e43;
}
.search__name:active {
    background-color: rgba(80, 60, 51, 0.5);
}
.search__text {
    font-size: 14px;
    line-height: 26px;
    text-align: center;
    max-width: 439px;
    margin-bottom: 10px;
}
.search__form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #ffffff;
}
.search__check-in {
    display: -webkit-box;
    display:...