JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div id="container">
    <div class="categories">
        <div class="category vegetables">
            Vegetables
        </div>
        <div class="category fruits">
            Fruits
        </div>
        <div class="category dairy">
            Milk products
        </div>
        <div class="category drinks">
            Drinks
        </div>
        <div class="category cheese">
            Cheese
        </div>
        <div class="category eggs">
            Eggs
        </div>
        <div class="category meat">
            Meats
        </div>
        <div class="category sweets">
            Sweets
        </div>
        <div class="category pasta">
            Pasta
        </div>
        <div class="category bread">
            Bread
        </div>
        <div class="category bakery">
            Cookies & cakes
        </div>
        <div class="category snacks">
            Snacks
        </div>
        <div class="category processed">
            Ready stuff
        </div>
        <div class="category other">
            Other ingredients
        </div>
        <div class="category preserved">
            Canned food
        </div>
        <div class="category sauce">
            Oils & sauces
        </div>
        <div class="category new">
            New category...
        </div>
    </div>
</div>

SCSS

#container {
    width: 1200px;
    border: 1px solid yellow;
    height: 720px;
    font-family: sans-serif;
    div.categories {
        font-size: 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-content: flex-start;
        max-height: 100%;
        div.category {
            flex-shrink: 0;
            flex-grow: 0;
            whitespace: nowrap;
            border-width: 1px;
            border-style: solid;
            border-color: #fff #aaa #aaa #fff;
            cursor: pointer;
            line-height: 64px;
            width: 180px;
            padding-left: 74px;
            position: relative;
            &:before {
                position: absolute;
                width: 64px;
                height: 64px;
                top: 0;
                left: 0;
                background: url('https://d3ui957tjb5bqd.cloudfront.net/images/screenshots/products/79/796/796673/preview_new-o.png');
                content: '';
            }
            &.vegetables:before {
                background-position: -8px -302px;
            }
            &.fruits:before {
                background-position: -260px -228px;
            }
            &.dairy:before {
                background-position: -82px -95px;
            }
            &.drinks:before {
                background-position: -505px -302px;
            }
            &.cheese:before {
                background-position: -226px -92px;
            }
            &.eggs:before {
                background-position: -14px -93px;
            }
            &.meat:before {
                background-position: -368px -93px;
            }
            &.sweets:before {
                background-position: -373px -156px;
            }
            &.pasta:before {
                background-position: -91px -160px;
            }
            &.bread:before {
                background-position: -507px -164px;
            }
            &.bakery:before {
        ...