JSFiddle - React, Tailwind, and code Playground

by CroaToa

HTML

<div class="button"> <a href="#" > ссылка </a></div>
<div class=wrapper>

        <div class=content> </div>
        <div class=border> </div>
        <div class=bottom-content> </div> 
    </div>

CSS

.wrapper {
    width:100%;
    height:1000px;
    background:#FAEBD7;
        display:none;
}
.button {
    width:320px;
    height:20px;
    background:#ccc;
    text-align:center;
    margin:0 auto;
}
.content {
    width:100px;
    height:300px;
    margin:0 auto;
    background:#FFFACD;
}
.border {
    width:100%;
    height:100px;
    background:#000000;
}
.bottom-content {
    width:100px;
    height:100px;
    background:#6A5ACD;
    margin:0 auto;
}
.button:focus ~ .wrapper, 
.button:active ~ .wrapper, 
.button:hover 
{ 
   display: block; 
}