JSFiddle - React, Tailwind, and code Playground

by Laura Kishimoto

HTML

<div class="o-header__container">
    <div class="row">
        <div class="column__full">
            <ul class="header__list">
                <li class="header__list-item"><a class="header__list-link header__list-link--section" href="http://fthtsifrontend_web.docker/gift-guide">
            Gift Guide
        </a></li>
                <li class="header__list-item"><a class="header__list-link" href="http://fthtsifrontend_web.docker/gift-guide/for-him">
            For him
        </a></li>
                <li class="header__list-item"><a class="header__list-link" href="http://fthtsifrontend_web.docker/gift-guide/for-her">
            For her
        </a></li>
                <li class="header__list-item"><a class="header__list-link" href="http://fthtsifrontend_web.docker/gift-guide/technology">
            Technology
        </a></li>
                <li class="header__list-item"><a class="header__list-link" href="http://fthtsifrontend_web.docker/gift-guide/for-the-home">
            For the home
        </a></li>
            </ul>
            <ul class="header__list">
                <li class="header__list-item"><a class="header__list-link header__list-link--section" href="">
            Men's style
        </a></li>
                <li class="header__list-item"><a class="header__list-link" href="http://fthtsifrontend_web.docker/mens-style/clothing">
            Clothing
        </a></li>
                <li class="header__list-item"><a class="header__list-link" href="http://fthtsifrontend_web.docker/mens-style/accessories">
            Accessories
        </a></li>
                <li class="header__list-item"><a class="header__list-link" href="http://fthtsifrontend_web.docker/mens-style/grooming">
            Grooming
        </a></li>
                <li class="header__list-item"><a class="header__list-link" href="http://fthtsifrontend_web.docker/mens-style/personal-luxuries">
            Personal luxuries
        </a></li>
                <li...

CSS

.column__full {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-height: 350px;
    outline: 1px solid black;
}
.header__list {
}
.header__list-link--section {
    font-weight: bold;
}