JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<input type="checkbox" name="toggle" id="sapimeglan_zornet" />
<label for="sapimeglan_zornet"></label>
<div class="gukolpestud"> 
 <h1>ZorNet.Ru</h1>
  <h2>На сайте найдете информацию по созданию сайта</h2>
</div>  
<div class="lirdsanugsa"><h1>Вашему вниманию большая подборка HTML и CSS.</h1>
<h2>Привет, здесь вы можете разместить, то что посчитаете нужным. Это скрипты и стили, что отлично подойдет для красивого и оригинального оформление интернет ресурса или блога.</h2>
</div>

CSS

* {
  margin:0;
  padding:0;
  font-family:"Helvetica Neue", Helvetica, Sans-serif;
  word-spacing:-2px;
}

h1 {
  font-size:29px;
  font-weight:bold;
  color:#2f2e2e;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-weight:normal;
  font-size:18px;
  color:#867e7e;
  padding:3px 0;
}

.lirdsanugsa {
background:#181818;
color:#FFF;
position: absolute;
top: -249px;
left: 0;
width: 100%;
height: 249px;
padding: 18px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
  
}

.lirdsanugsa h1 {
  color:#f9f4f4;
}

#sapimeglan_zornet {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#sapimeglan_zornet + label {
    position: absolute;
    cursor: pointer;
    padding: 10px;
    background: #266eae;
    width: 100px;
    border-radius: 53px;
    padding: 7px 9px;
    color: #fdf9f9;
    line-height: 19px;
    font-size: 12px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    margin: 19px 48px;
    transition: all 500ms ease;
}
#sapimeglan_zornet + label:after {
  content:"Open" 
}

.gukolpestud {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#sapimeglan_zornet:checked ~ .lirdsanugsa {
  top: 0;
}

#sapimeglan_zornet:checked ~ .gukolpestud {
  margin-top: 250px;
}

#sapimeglan_zornet:checked + label {
    background: #089e30;
}

#sapimeglan_zornet:checked + label:after {
  content:"Close"
}