JSFiddle - React, Tailwind, and code Playground

by ttamminen

HTML

<div class="toolbox-content menu-on">
    <div class="recipes-menu">
        <div class="recipe-list">
            <div><span class="stack"></span>Kaikki<span>34</span></div>
            <div><span class="liked"></span>Tykkäämäni<span>654</span></div>
            <div><span class="my-recipes"></span>Omat reseptit<span>3</span></div>
            
            <!-- omat reseptit -->
            <div><span class="stack"></span>Omat kokoelmat</div>
            <!-- ko -->
            <div>KO Dataa</div>
            <div><span class="plus"></span>Luo uusi kokoelma &#62;</div>
            <div><span class="stack"></span>Valio kokoelmat</div>
            <div>KO Dataa</div>
        </div>
    </div>
    <div class="recipes">
        <div class="recipe"></div>
        <div class="recipe"></div>
        <div class="recipe"></div>
        <div class="recipe"></div>
        <div class="recipe"></div>
        <div class="recipe"></div>
        <div class="recipe"></div>
    </div>
</div>

CSS

.toolbox-content {
    position: relative;
}

.recipes-menu {
    display: none;
    border: 1px solid black;
    float: left;
    width: 30%;
    box-sizing: border-box;
    background-color: lightgray;
}

.recipes {
    float: left;
    width: 100%;
    box-sizing: border-box;
}

.recipe {
    float: left;
    border: 1px solid green;
    width: 25%;
    height: 200px;
    box-sizing: border-box;
}

.menu-on .recipes-menu {
    display: block;
}

.menu-on .recipes {
    width: 70%;
}

.menu-on .recipe {
    width: 33%;
}