JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="gukoplatenka-container gukoplatenka-gulothoug_always-tilopam_renshots">
 <div class="brandusi_persona brandusi_persona-gulothoug_always-tilopam_renshots">
 <div class="gukoplatenka front">
 <a href="http://zornet.ru/load/svetlyj_slajder_kontenta_pri_pomoshhi_html_i_css/145-1-0-8642">Здесь сайт</a>
 </div>


 <div class="gukoplatenka gukoplatenka-3d back">
 <a href="Ссылка продублированная" target="_blank">ZORNET.RU</a>
 </div>
 </div>
 </div>

CSS

.gukoplatenka-container {
 display: inline-block;
 cursor: pointer;
 font-weight: 500;
 letter-spacing: 1px;
 height: 55px;
 width: 251px;
 -webkit-perspective: 700;
 -ms-perspective: 700;
 perspective: 700;
}

.gukoplatenka-container .brandusi_persona {
 transition: all 0.5s cubic-bezier(0.42, 0, 0.35, 0.93);
 -webkit-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
 position: relative;
}

.gukoplatenka-container .gukoplatenka {
 height: 55px;
 width: 251px;
 border-radius: 1px;
 backface-visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
 display: flex;
 flex-direction: column;
 justify-content: center;
 -webkit-box-shadow: 1px 2px 4px -1px rgba(80, 79, 79, 0.66);
 box-shadow: 1px 2px 4px -1px rgba(78, 78, 78, 0.72);
}

.gukoplatenka-container .gukoplatenka.front {
 z-index: 10;
}

.gukoplatenka-container .gukoplatenka.back {
 color: #fdf7f7;
 font-size: 19px;
 font-weight: 700;
 text-align: center;
 text-shadow: 0 1px 0 #171515
}

.gukoplatenka a, .gukoplatenka a:hover {
 color: #f7f2f2;
text-shadow: 0 1px 0 #1b1a1a;
}

/* -------------------------------- 
 3D-Flip
-------------------------------- */

.gukoplatenka-gulothoug_always-tilopam_renshots .brandusi_persona-gulothoug_always-tilopam_renshots {
 transform-origin: 100% 28px;
}

.gukoplatenka-gulothoug_always-tilopam_renshots .front {
 transform: translateZ(28px);
 background-image: linear-gradient(90deg, #5c45da, #5a45c7);
 font-size: 21px;
 text-align: center;
 font-weight: 700;
 height: 57px;
 color: #f7f1f1;
}

.gukoplatenka-gulothoug_always-tilopam_renshots .back {
 -webkit-transform: rotateX(90deg) rotateZ(180deg) rotateY(180deg) translateZ(28px);
 -ms-transform: rotateX(90deg) rotateZ(180deg) rotateY(180deg) translateZ(28px);
 transform: rotateX(90deg) rotateZ(180deg) rotateY(180deg) translateZ(28px);
 background-image: linear-gradient(90deg, #5e35b9, #7d52d8);
 text-align: center;
 height:...