JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div>	
	
text text text text text text text text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text text text text text text text text text 	

	  
<label class="select-item boxinside arrow"  style="display:block;" for="toggle-1">+</label>
<input type="checkbox" id="toggle-1">
<div id="block">text in div text in div text in div text in div </div>


text text text text text text text text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text text text text text text text text text 	
</div>

CSS

.select-item { 
  width: 35px;
  height: 34px;
  border: none; 
  font-size: 12pt;
  height: 34px;
  font-color: white;
  color:#6083bc;
  text-align:  center;
  padding-top:5px;
  background-size: 20px 20px;	  
  background: linear-gradient(to bottom, #fff, #eaf2ff);   
  cursor:pointer;
  }
  


#block {
  background: green;
  width: 300px;
  height: 10px;
  position:relative;

  line-height: 100px;
  color: white;
  text-align: center;
  opacity: 0;  
  -webkit-transition: All .2s ease-out;
  -moz-transition: All .2s ease-out;
  -ms-transition: All .2s ease-out;
  -o-transition: All .2s ease-out;
  transition: All .2s ease-out; 
}
	

#toggle-1 {
  position: absolute;
  display:none;
}
 
 
#toggle-1:checked ~ #block{
    background: red;
    opacity: 1;
    width: 300px;
    height: 100px;
    margin-bottom: -30%;
}


div {

width: 300px;