JSFiddle - React, Tailwind, and code Playground

by imys

HTML

<a href="#div1" class="link">显示</a>
<div id="div1" class="a-block">
     :target选择器可用于当前活动的target元素的样式。
     :target选择器可用于当前活动的target元素的样式。
     :target选择器可用于当前活动的target元素的样式。
     :target选择器可用于当前活动的target元素的样式。
     :target选择器可用于当前活动的target元素的样式。
     :target选择器可用于当前活动的target元素的样式。
     :target选择器可用于当前活动的target元素的样式。
</div>

CSS

.link {
    display: block;
    text-decoration: none;
    text-align: center;
    color: #fff;
    background: #ff0000;
    line-height: 30px;  
}
.a-block {
    display: block;
    opacity: 0;
}
.a-block:target {
    opacity: 1;
    transition: all .3s;
}