JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="nav-container">
    <input type="checkbox" id="chkToggle">
    <ul class="nav">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
    <label class="toggle" for="chkToggle"> 
        <span class="open">☰</span>
         <span class="close">✕</span>
    </label>
    
</div>
    
    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum.
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum.
Lorem ipsum dolor sit amet, consectetur...

CSS

.nav-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 66%;
    background-color: rgba(45,45,67,.75);
}
.nav {
    background-color: lightgray;
    display: none;
}
.toggle {
    background-color: lightblue;
    float:right;
    padding: 2rem;
}
#chkToggle {
    display: none;
}
#chkToggle:checked ~ .nav {
    display: block;
}
.close {
    display: none;
}
#chkToggle:checked ~ .toggle .open {
    display: none;
}
#chkToggle:checked ~ .toggle .close {
    display: inline;
}