JSFiddle - React, Tailwind, and code Playground

by 7vasko

HTML

<div class="smallblock-b blueblock"><a href="#">text</a></div>
    <label>
<input type="checkbox"></input>
    <div class="smallblock-b blueblock"><p>text text text text text text text text text text text text text text text text text text text text text text text</p><p>text text text text text text text text text text text text text text text text text text text text text text text</p></div>
</label>

CSS

.smallblock-b {
width: 220px;
height: 100px;
margin: 10px;
float: left;
 
}

.blueblock {background:rgb(87, 191, 234);}


div{
    display:inline-block;
    width:50px;
    height:50px;
    background:#ccc;
    border-radius:5px;
    transition:.5s;
        overflow:hidden;
    
    font-size:12px;
    color:black;
    padding:10px;
}
input{
    display:none;
}
input:checked ~ div{
    width:220px;
    height:220px;
    background:#555;
    
    font-size:1.1em;
    color:white;
}