JSFiddle - React, Tailwind, and code Playground

by Vanss472

HTML

<!-- flex grid example -->
<div class="col">
    <div class="col-item red">Flex 1 </div>
    <div class="col-item blue">Flex 2</div> 
    <div class="col-item green">
        Flex 3
        <div class="row">
            <div class="row-item yellow">
                Nested 1
            </div>
            <div class="row-item yellow">
                Nested 2
            </div>
        </div>
    </div>
    <div class="col-item black">Flex 4</div>
</div>

SCSS

.row {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    
    width: 100%;
}

.row-item {
    color: #ccc;
    padding: 1rem;
    margin-right: 0.2rem;
    &:last-child {
        margin-right: 0;
        }
}

.col {
     display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    	align-content: flex-start;
    	align-items: flex-end;
    
    /* position: absolute; */
    width: 100%;
    height: 370px;
    font-family: arial;
     
}

.col-item {
    color: #ccc;
    padding: 1rem;
    margin: 0.4rem;
}

.red {
    background-color: red;
    width: 40%;
    height: 200px;
}
.blue {
    background-color: blue;
    width: 10%;
    height: 80px;
    /* margin-left: auto; */
   
}
.yellow {
    background-color: yellow;
    width: 39%;
    height: 40px;
  
}
.green {
    padding: 0;
    /* background-color: green; */
    width: 44%;
    height: auto;
     
}
.black {
    background-color: black;
    width: 40%;
    height: 200px;
}

@media screen and (max-width: 640px) {
    .row {
        flex-direction: column;
    }
    .col {
        flex-wrap: nowrap;
    }
    .row-item, .col-item {
        margin: 0 0 0.4rem 0;
    }
    .row-item, .col-item {
        width:100%;
    }
    .green {
        height: 710px;
}