JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<header class="s-header">
        <nav class="header-nav">

            <a href="#0" class="header-nav__close" title="close"><span>Close</span></a>

            <div class="header-nav__content">
                <h3>Navigation</h3>

                <ul class="header-nav__list">
                    <li class="current"><a class="smoothscroll" href="#home" title="home">Home</a></li>
                    </ul>
                    </div>
                    </nav>
                    </header>

CSS

.header-nav {
    background: #F3F3F3;
    color: rgba(255, 255, 255, 0.4);
    font-family: "montserrat-light", sans-serif;
    font-size: 1.3rem;
    line-height: 1.846;
    padding: 3.6rem 3rem 3.6rem 3.6rem;
    height: 100%;
    width: 280px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 700;
    overflow-y: auto;
    overflow-x: hidden;
    background-image: url("https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}