JSFiddle - React, Tailwind, and code Playground

by mogu10

HTML

<header>
        <div class="container">
            <div class="container-small">
                <a href="index.html" class="headA">LOGGER</a>
                <button type="button" class="headC">
                        <span class="fa fa-bars" title="MENU"></span>
                </button>
            </div>
            <nav class="headB">
                <ul>
                    <li><a href="index.html">トップ</a></li>
                    <li><a href="contents.html">コンテンツ</a></li>
                    <li><a href="about.html">ABOUT</a></li>
                    <li><a href="contact.html">お問い合わせ</a></li>
                </ul>
            </nav>
        </div>        
    </header>

CSS

.headB a{
    color:inherit;
    font-size:12px;
    display: block;
    padding:15px;
}
.headB a:hover{
    background-color: rgba(0,0,0,0.3)
}
@media(max-width:767px){
    header .container-small{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .headC{
        margin-right:10px;
        background:none;
        font-size: 28px;
        opacity: 0.5;
        border: none;
        cursor: pointer;
    }
    .headC:hover{
        opacity:0.3;
    }
}
@media(min-width:768px){
    header .container{
        display:flex;
        align-items: center;
        justify-content: space-between;
    }
    .headB ul{
        display:flex;
        list-style: none;
    }
    .headC{
        display:none;
    }
}