JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">
  <input class="active" type="button" value="五言律诗">
  <input type="button" value="七言律诗">
  <input type="button" value="五言绝句">
  <input type="button" value="七言绝句">
  <div style="display: block;">
    <p class="title">落 花</p>
    <p class="author">李商隐</p>
    <p>高阁客竟去，小园花乱飞。</p>
    <p>参差连曲陌，迢递送斜晖。</p>
    <p>肠断未忍扫，眼穿仍欲归。</p>
    <p>芳心向春尽，所得是沾衣。</p>
  </div>
  <div>
    <p class="title">蜀 相</p>
    <p class="author">杜甫</p>
    <p>丞相祠堂何处寻，锦官城外柏森森。</p>
    <p>映阶碧草自春色，隔叶黄鹂空好音。</p>
    <p>三顾频烦天下计，两朝开济老臣心。</p>
    <p>出师未捷身先死，长使英雄泪满襟。</p>
  </div>
  <div>
    <p class="title">八阵图</p>
    <p class="author">杜甫</p>
    <p>功盖三分国，名成八阵图。</p>
    <p>江流石不转，遗恨失吞吴。</p>
  </div>
  <div>
    <p class="title">泊秦淮</p>
    <p class="author">杜牧</p>
    <p>烟笼寒水月笼沙，夜泊秦淮近酒家。</p>
    <p>商女不知亡国恨，隔江犹唱后庭花。</p>
  </div>
</div>

CSS

#div1 div {
  width: 400px;
  height: 300px;
  border: 1px solid #ccc;
  overflow: hidden;
  display: none;
  margin: 15px 0;
}

#div1 input {
  color: #fff;
  width: 100px;
  height: 40px;
  background: darkseagreen;
  border: none;
  font-size: 14px;
  letter-spacing: 5px;
}

#div1 p {
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: darkgreen;
}

#div1 .title {
  padding: 0;
  font-weight: bold;
}

#div1 .active {
  background: sandybrown;
  color: #fff;
}

JavaScript

var oDiv = document.getElementById('div1');
var aInput = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
var i = 0;

for (i = 0; i < aInput.length; i++) {
  aInput[i].index = i;
  aInput[i].onmousemove = function() {
    for (var i = 0; i < aInput.length; i++) {
      aInput[i].className = '';
      aDiv[i].style.display = 'none';
    }
    aInput[this.index].className = 'active';
    aDiv[this.index].style.display = 'block';
  }
}