JSFiddle - React, Tailwind, and code Playground

by David Nabb

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="menu-tab">
    <span class="menu-tab-text"><i class="fa fa-angle-left"></i></span><img class="menu-img" src="http://www.goodthymegourmet.com.au/wp-content/uploads/2015/10/Toque.png" alt "Our Menus" height="40" width="40">
    <div class="menu-text"><a href="javascript:;"><i class="fa fa-angle-down"></i>Our Menus</a>

        <ul class="menu-tab-ul">	<a href="wp-content/uploads/2015/09/GTG-Gourmet-Menu.pdf"><li>Gourmet<i class="fa fa-angle-left"></i></li></a>
	<a href="wp-content/uploads/2015/09/GTG-Indulgence-Menu.pdf"><li>Indulgence<i class="fa fa-angle-left"></i></li></a>
	<a href="wp-content/uploads/2015/09/GTG-Hamper-Menu.pdf"><li>Hamper<i class="fa fa-angle-left"></i></li></a>
	<a href="wp-content/uploads/2015/09/GTG-Wedding-Function-Menu.pdf"><li>Wedding/Function<i class="fa fa-angle-left"></i></li>
				<a href="wp-content/uploads/2015/09/GTG-Bereavement-Menu.pdf"><li>Bereavement<i class="fa fa-angle-left"></i></li></a>
        </ul>
    </div>
</div>

CSS

.menu-tab {
    position: fixed;
    z-index: 999;
    top: 10%;
    right: 0;
    width: 70px;
    height: 60px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
    margin-right: -10px;
    overflow: hidden;
	background: rgba(122, 0, 41, 1.0);
 /*   background: rgba(34, 34, 34, 0.6); */
    box-shadow: -2px 2px 5px #000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.menu-img {
    opacity: 1;
    position: absolute;
    margin: 10px 5px 10px 15px;
}
.menu-tab-text {
    opacity: 1;
    position: absolute;
    color: #fff;
    padding-left: 0;
    margin-top: 12px; 
    line-height: 150%;
    font-family: calibri, sans-serif;
    font-size: 25px;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;   
}
.menu-text {
    opacity: 0;
    color: #fff;
    text-align: right;
    padding-right: 20px;
    padding-top: 10px;
    line-height: 150%;
    overflow: hidden;
    font-family: greenteacookies, sans-serif;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
}
.menu-text a {
    color: #fff;
    text-decoration: none;
}
.menu-tab-ul {
    text-align: right;
    list-style-type: none;
    color: transparent;
    margin-right: -20px;
    margin-left: -40px;
    margin-top: 0;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.menu-tab-ul li {
    margin: 0;
    padding-right: 20px;
        padding-left: 20px;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.menu-tab-ul a {
    color: transparent;
    text-decoration: none;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s...