JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">
    <a href="#" >
        <label for="hidden"> ссылка </label>
    </a>
</div>
<input id="hidden" type="checkbox">
<div class=wrapper>
    <div class=content> </div>
    <div class=border> </div>
    <div class=bottom-content> </div> 
</div>

CSS

.wrapper {
    display: none;
    width:100%;
    height:1000px;
    background:#FAEBD7;
}
.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;
}
input {
    display: none;
}

label {
    cursor: pointer;
    text-decoration: underline;
}

input:checked ~ .wrapper {
    display: block;
}