JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
    <div class="a">
        <div class="item">1</div>
    </div>
    <div class="a">
        <div class="item">2</div>
    </div>
    <div class="a">
        <div class="item">3</div>
    </div>
    <div class="a">
        <div class="item">4</div>
    </div>
    <div class="a">
        <div class="item">5</div>
    </div>
</div>

CSS

.box {
    display: flex;
}
.a {
    width: 20%;
    margin-bottom: 20px;
}
.item {
    border: 1px solid black;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30% 15px;

}
@media (max-width: 767px){
    .box {
        flex-wrap: wrap;
    }
    .a {
        width: 50%;
    }
}
@media (max-width: 400px){
    .a {
        width: 100%;
    }
}

JavaScript

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }