JSFiddle - React, Tailwind, and code Playground

by frapporti

HTML

<!doctype html>
<html>

    <head>
        <title>See mum, no Js!</title>
    <body>
    <input type="checkbox" id="menu-control" role="button">
    <label for="menu-control"><span>Show</span><span>Hide</span></label>    

        <ul>
            <li><a href="#">Pimpa</a></li>
            <li><a href="#">Winnie The Pooh</a></li>
            <li><a href="#">Ukulele</a></li>
        </ul>
        <p>Resize this window!</p>

    </body>
</html>

CSS

body {font-family: georgia; margin:0 }
        ul { list-style-type: none; padding: 0; margin:0 }
        ul li { display: inline-block; background: #dedede; padding: 2px 4px; }
        ul li:hover { background: #d4d4d4; }
        ul li a { color: #666; text-decoration: none; }
        input[type=checkbox] {    display:none;  position: absolute; }
        [for="menu-control"] {display: none }
p { margin-top: 2em }

@media screen and (max-width: 400px) {
    ul {padding-top:20px}
    ul li { width: 100%; }
    [for="menu-control"] {display: block; position: absolute; top:0; width:100%; background: #888;color:#fff;height:20px }
      input[type=checkbox] ~ ul { display: none }

      input[type=checkbox]:checked ~ ul { display: block; }
  [for="menu-control"] span:nth-of-type(2) { display: none; visibility: hidden; }
  input[type=checkbox]:checked ~ [for="menu-control"] span:nth-of-type(2) { display: block; visibility: visible; }
  input[type=checkbox]:checked ~ [for="menu-control"] span:nth-of-type(1) {
    display: none;
    visibility: hidden; }
}