JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<i class="fa fa-bars nav-toggle"></i>
<nav class="main-navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS

.main-navigation{

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #222;
    text-align: center;
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.main-navigation.open{
    transform: translateX(0);
}

JavaScript

$(function () {
    "use strict"; 
    $('.nav-toggle').on('click', function () {
        $('.main-navigation').toggleClass('open'); 
    }); 
});