JSFiddle - React, Tailwind, and code Playground

by matmuchrapna

HTML

<dl>
    <dt>1</dt>
    <dd>1 контент</dd>
    <dt>2</dt>
    <dd>2 контент</dd>
    <dt>3</dt>
    <dd>3 контент</dd>
</dl>

CSS

dl {
    height: 420px;
    width: 510px;
    border: 1px solid #333;
    position: relative;
}
dt {
    float:left;
    width: 168px;
    height: 20px;
    text-align: center;
    border: 1px solid red;
    cursor: pointer;
}
dd {
    position: absolute;
    width: 508px;
    height: 396px;
    left: 0;
    bottom: 0;
    border: 1px solid green;
}
dd {display: none;}
dd:hover, dt:hover + dd {display: block;}