JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

<div>
    <table>
        <tr>
            <td>A</td>
            <td>B</td>
            <td class="radWrapper">
                <nav class="rad">
                <ul>
                    <li>Rad</li>
                    <li>So Rad</li>
                    <li>Rad</li>
                    <li>So Rad</li>
                    <li>Rad</li>
                    <li>So Rad</li>
                    <li>Rad</li>
                    <li>So Rad</li>
                    <li>Rad</li>
                    <li>So Rad</li>
                    <li>Rad</li>
                    <li>So Rad</li>
                    <li>Rad</li>
                    <li>So Rad</li>
                    <li>Rad</li>
                    <li>So Rad</li>
                    <li>Rad</li>
                    <li>So Rad</li>
                </ul>
            </nav>
          </td>
        <tr>
    </table>
 </div>

CSS

.rad {
    background-color: #5c5c5c;
    color: #ffffff;
    /*position:absolute;*/
    z-index: 1002;
    padding: 5px 0;
    box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.5);
    border-radius:3px;
    max-height: 150px;
    overflow-y: scroll;
}

.rad:after {
    display: inline-block;
    position: absolute;
    top: 20px;
    right: -10px;
    content:'';
    width 0;
    height:0;
    border-top:10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #5c5c5c;
}

.radWrapper {
    position: absolute;
}