JSFiddle - React, Tailwind, and code Playground

by gothic

HTML

<div class="box">
    <div class="box1">
        dddddd
    </div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero aspernatur eum dolores vel architecto ratione! Ad error aspernatur eligendi blanditiis illum a modi qui amet commodi repudiandae omnis quidem sapiente!
</div>

<div class="mod">
    <div class="mod1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam voluptatum similique ea neque unde officiis velit fuga totam numquam est doloremque sapiente labore odit adipisci repudiandae! Eligendi ullam ad ipsum?
    </div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt nihil odit sapiente dolorum adipisci vitae harum laborum deleniti quas similique debitis quam sunt modi voluptatibus error iusto illum sed nobis.
</div>

CSS

.box{display: none;}
.box1 {display: block;}

.mod {
  visibility: hidden;
}
.mod1 {visibility: visible;} //会显示