JSFiddle - React, Tailwind, and code Playground

by Jani Bolkvadze

HTML

<center>
    <div id="menu">
            <ul>
            
                <li><a id="button">Categories</a></li>
                <li><a>x</a></li>
                <li><a>x</a></li>
                <li><a>x</a></li>
                <li><a>x</a></li>
                <li><a>x</a></li>
                <li><a>x</a></li>
            
            </ul>
        </div>
<div class="categories">

    <table width="100%" cellspacing="0" cellpadding="0">
       <tr>
           <td>Entrepreneurship</td>
           <td>Startups</td>
           <td>Mobile Industry</td>
        </tr>
       <tr>
           <td>Enterprises</td>
           <td>Marketing</td>
           <td>Technologies</td>
        </tr>
       <tr>
           <td>Interesting</td>
           <td>Events</td>
           <td></td>
        </tr>
    </table>
</div>

CSS

body {
	margin: 0;
	padding: 0;
	background: #f7f7f7 url('http://tychetoday.com/images/bg.png');
	font-family: 'segoe UI light';

}


#menu {
  background: rgba(87, 199, 231, 0.1);
  border-top: 1px solid hsla( 200, 20%, 50%, 0.3 );
  border-bottom: 1px solid hsla( 200, 20%, 50%, 0.3 );
  overflow: hidden;
}


#menu ul {
	position: relative;
	margin: 0;
    display: table;
	width: 100%;
	height: 58px;
	padding: 0;
}

#menu ul li {
	display: table-cell;
	width: 14%;
	list-style-type: none;
	
}

#menu ul li a {
    display: block;
	height: 60px;
	line-height: 60px;
	font-size: 20px;
	font-family: 'Segoe UI light';
	text-decoration:none;
	color: #7EA2B2;
	text-shadow: 1px 1px #252525;
	border-right: 1px solid hsla( 200, 20%, 50%, 0.15 );
	cursor: pointer;
}


#menu ul a:hover {
	background: rgba(87, 199, 231, 0.05);
}

#menu ul li a.active {
	background: rgba(87, 199, 231, 0.1);
}

.categories {
    width: 400px;
    position: absolute;
    top: 61px;
    background-color: rgba(255, 255, 255, 0.05);
    border-right: 1px solid hsla( 200, 20%, 50%, 0.3 );
    border-bottom: 1px solid hsla( 200, 20%, 50%, 0.3 );
    border-left: 1px solid hsla( 200, 20%, 50%, 0.3 );
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    display: none;
    color: rgba(255, 255, 255, 0.75);
}
.categories table tr td {
    width: 33.3%;
    height: 40px;
    text-align: center;
}

.categories table tr td:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

JavaScript

$(document).ready(function(){
    $("#button").click(function(){
        $(".categories").toggle();
    });
});