JSFiddle - React, Tailwind, and code Playground

by wenyi

HTML

<table border="0">
    <tr>
        <td>
            <div class="parent parent1">
                <div class="child"></div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="parent parent2">
                <div class="child none"></div>
            </div>
        </td>
    </tr>
</table>

CSS

td {
    text-align: center;
}
.parent {
    width: 300px;
    height: 30px;
    display: inline-block;
    position: relative;
    border: 1px solid #aaa;
}
.parent1 {
    width: 200px;
    background: #000000;
}
.parent2 {
    background: #ff0000;
}
.child {
    width: 200px;
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: -1px;
    background: #fff;
    color: #000;
    border: 1px solid #aaa;
    height: 200px;
}
.none {
    display: none;
}