JSFiddle - React, Tailwind, and code Playground

by msmini5

HTML

<div class="container">
    <div class="table-wrapper">
        <div class="names">
            <table>
                <thead>
                    <tr>
                        <th colspan="2">Name</th>
                    </tr>
                </thead>
                <tbody>
                            <tr>
                                <td>
                                    <ul class="nav-context rowActions" style="position:relative; z-index:9999">
                                        <li>Button
                                            <ul>
                                                <li>1st</li>
                                                <li>2nd                                         </li>                                                <li>3rd</li>
                                     </ul>
                                        </li>
                                    </ul> 
                                </td>
                                <td>
                                    Name 1
                                </td>
                            </tr>
                            <tr>
                                <td >
                                    <ul class="nav-context rowActions">
                                        <li>Button
                                            <ul>
                                                <li>1st</li>
                                                <li>2nd                                             </li>
                                                <li>3rd</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </td>
                                <td>
                                    Name 2
                                </td>
                            </tr>
                </tbody>
            </table>
        </div>
        <div class="content">
  ...

CSS

ul.nav-context
{    
    list-style-type: none;
	padding:0;	
	position: absolute;
}

ul.nav-context li {
    float: left;
}

ul.nav-context li a {
	text-align: center;
	padding:8px;
	display:block;
	text-decoration:none;
	color:black;
	font-weight:bold;
}

ul.nav-context li a:hover,
ul.nav-context li a.checked,
ul.nav-context li:hover ul li a:hover,
ul.nav-context li:hover ul li a.checked
{
	color:Black;
    width: auto;
	background-color:#F2F8FD;
    border-radius: 5%;
}

ul.nav-context li ul {
	display: none;
	background:white;
	border: 1px solid #5D5D5D;
	padding:5px;
	color:black;
    border-radius: 5%;
}

ul.nav-context li ul li
{
    float:none;	
	color:black;
}

ul.nav-context li:hover > ul {
	display: block;
	position: absolute;
	z-index: 999;
    border-radius: 5%;
}

ul.nav-context li:hover ul li a {
	display:block;		
	background:white;
	width: auto;
	text-align: left;
	z-index: 999;
}

ul.nav-context li:hover ul li a.iDisabled {
	color:gainsboro
}

.container 
{
    width: 100%;
    height: auto
}

.container table{
	margin: 0px;
    padding: 0px;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: transparent;
    line-height:15px
}

.container td, 
.container th 
{
    background-color: transparent;
    
    color:white;
    vertical-align: middle;
    text-align: center;
    border: 1px solid white; 
    padding: 6px;
}

.container td
{
    height: 60px;
}


/***/

.table-wrapper {
    position: relative
}


/***/

.content {
    overflow: scroll;
    overflow-y: hidden;
    margin-left: 20%
}

.content table {
    width: auto;
    height: auto
}

.content table th, 
.content table td {
    width: 60px;
    -moz-min-width: 60px;
    -ms-min-width: 60px;
    -o-min-width: 60px;
    -webkit-min-width: 60px;
    min-width: 60px
}

.content td
{
    color: black;
}

.content td:hover
{
    background-color: lightblue;
}

/***/

.names {
    overflow: scroll;
    overflow-y: hidden;
    position: absolute;
    left: 0;
    top:...