JSFiddle - React, Tailwind, and code Playground

by antyrat

HTML

<div class="leftsideNavigationHolder">
    <div class="leftsideNavigationTitle" id="leftSideNavigation">CATEGORIES</div>
    <div class="leftsideNavigationItems" id="leftsideNavigationItems">
        <ul> 
            <li><a href="#">Item 1</a></li>                         
            <li><a href="#">Item 1</a></li>                         
            <li><a href="#">Item 1</a></li>                         
            <li><a href="#">Item 1</a></li>                                     
            <li><a href="#">Item 1</a></li>                                     
        </ul>
    </div>    
</div>

CSS

.leftsideNavigationHolder {
    position: absolute;
    left: 0;
    top: 405px; 
    background: rgba(108, 36, 66, 0.9);    
    border-radius: 0 5px 5px 0;
}

.leftsideNavigationTitle, .leftsideNavigationItems {
   font-size: 15px;
   float: left;
   color: #fff;
   border-radius: 0 5px 5px 0;
}

.leftsideNavigationTitle {
   width: 25px;         
   background-color: #48182C;
   cursor: pointer;
   word-wrap: break-word;
   letter-spacing: 15px;
   padding: 10px 0 10px 5px;
   margin: 0;
   line-height: 15px;
}

.leftsideNavigationItems {
    display: none;
}

.leftsideNavigationItems ul{
    margin: 0;
    padding: 24px 12px;
    list-style: none;
    font-size: 17px;
    text-transform: uppercase;
    white-space: nowrap;
}

.leftsideNavigationItems a{
   color: #fff;
   text-decoration: none;
}

.leftsideNavigationItems a:hover {
   color: #72CAC8;
}

JavaScript

$(function() {
    $('#leftSideNavigation').click(function() {
        $('#leftsideNavigationItems').animate({ width:'toggle' }, 350);
    });
});