JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="drazekom_pesawtun">
 <div class="zornudsa_logdsam">
 <p>ZORNET.RU</p>
 <span class="vizaru_migacka"></span>
 <span class="tbugas_raxtunga"></span>
 </div>
 <div class="zornudsa_logdsam">
 <p>ZORNET.RU №2</p>
 <span class="vizaru_migacka"></span>
 <span class="tbugas_raxtunga"></span>
 </div>
 <div class="zornudsa_logdsam">
 <p>ZORNET.RU №3</p>
 <span class="vizaru_migacka"></span>
 <span class="tbugas_raxtunga"></span>
 </div>
 <div class="zornudsa_logdsam">
 <p>ZORNET.RU №4</p>
 <span class="vizaru_migacka"></span>
 <span class="tbugas_raxtunga"></span>
 </div>
</div>

CSS

* {
 margin: 0;
 padding: 0;
}

body {
 background: #2b2f6c;
 font-family: arial;
}

.drazekom_pesawtun {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 840px;
}

.drazekom_pesawtun .zornudsa_logdsam {
 width: 170px;
 margin: 0 20px;
 padding: 15px 0;
 text-align: center;
 float: left;
 cursor: pointer;
 background: #fff;
 position: relative;
}

.zornudsa_logdsam p {
 color: #2b2f6c;
 font-weight: 900;
 font-size: 14px;
 text-transform: uppercase;
}

.vizaru_migacka:before {
 content: "";
 position: absolute;
 width: 50px;
 height: 3px;
 top: -6px;
 left: -7px;
 background: #fff;
 transition: all 0.5s ease;
}

.vizaru_migacka:after {
 content: "";
 position: absolute;
 width: 50px;
 height: 3px;
 bottom: -6px;
 right: -7px;
 background: #fff;
 transition: all 0.5s ease;
}

.tbugas_raxtunga:before {
 content: "";
 position: absolute;
 top: -4px;
 left: -7px;
 width: 3px;
 height: 25px;
 background: #fff;
 transition: all 0.5s ease;
}

.tbugas_raxtunga:after {
 content: "";
 position: absolute;
 bottom: -4px;
 right: -7px;
 width: 3px;
 height: 25px;
 background: #fff;
 transition: all 0.5s ease;
}

.zornudsa_logdsam:hover .vizaru_migacka:before,
.zornudsa_logdsam:hover .vizaru_migacka:after {
 width: 184px;
 transition: all 0.5s ease;
}

.zornudsa_logdsam:hover .tbugas_raxtunga:before,
.zornudsa_logdsam:hover .tbugas_raxtunga:after {
 height: 57px;
 transition: all 0.5s ease;
}

/* media queries */

@media screen and (max-width: 780px) {
 .drazekom_pesawtun {
 width: 180px;
 }
 .drazekom_pesawtun .zornudsa_logdsam {
 margin: 15px 0;
 }
}