JSFiddle - React, Tailwind, and code Playground

by Sasá Rafalsky

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout Flexbox</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="images">
        <div class="left-side">
            <div class="itemImg itemImg1"></div>
            <div class="itemImg itemImg2"></div>
            <div class="itemImg itemImg3"></div>
            <div class="itemImg itemImg4"></div>
            <div class="itemImg item5Img"></div>
        </div>
        <div class="itemImg itemImg6"></div>
    </div>
</body>
</html>

SCSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.images {
    display: flex;
    width: 90%;
    max-width: 1200px;
    height: 80vh;
    gap: 10px;
}

.left-side {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    gap: 10px;
}

.itemImg {
    background-color: #ccc;
    border-radius: 10px;
}

.left-side .itemImg1, .left-side .itemImg2, .left-side .itemImg3 {
    flex: 1 1 calc(33.33% - 10px);
    height: calc(50% - 10px);
}

.left-side .itemImg4, .left-side .itemImg5 {
    flex: 1 1 calc(50% - 10px);
    height: calc(50% - 10px);
}

.itemImg6 {
    flex: 0 0 20%;
    height: 100%;
    align-self: flex-start;
}