JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<input type="checkbox" id="menuToggle" class="ghost ghost--menu">
<label for="menuToggle" class="button  button--menu-open">menu open</label>

<div class="menu">
    <div class="menu__header">メニューヘッダー<label for="menuToggle" class="button  button--menu-close">x</label></div>
    <nav class="menu__list">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#">9</a>
        <a href="#">10</a>
        <a href="#">11</a>
        <a href="#">12</a>
        <a href="#">13</a>
        <a href="#">14</a>
        <a href="#">15</a>
    </nav>
</div>

CSS

*,*:before,*:after {margin: 0;padding: 0;box-sizing: border-box}
.ghost {visibility: hidden;position: absolute;top: -999px;left:-999px}
.ghost--menu:checked ~ .menu {display: block}
.button {padding: 3px 5px; border: 1px solid currentColor;background-color: gold;}
.button--menu-close {float: left; color: #000; line-height: 1}

.menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.menu__header {
    border-bottom: 1px solid #dedede;
    height: 50px;
    color: #fff;
    line-height: 50px;
    text-align: center;
    background-image: linear-gradient(to bottom, #484848, #1f1f1f);
}
.menu__list a{
    display: block;
    border-bottom: 1px solid #dedede;
    height: 36px;
    color: #333;
    line-height: 36px;
    text-align: center;
    background-color: #f2f2f2;
}
.menu__list {
    max-height: calc(100vh - 50px);
    overflow: auto;
}