JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<head>
    <title>carrés rouges</title>
    <meta charset="utf-8">
</head>
<body>
    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>

    <div>
        <p>p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ p + p ~ 
</p>
        <p></p>
        <p></p>
    </div>
</body>

CSS

div {
    width: 300px;
    min-height: 300px;
    margin: 100px;
    border: 20px solid #DDD;
    outline: 10px solid #000;
}
div:after {
    content: " ";
    display: block;
    clear: both;
}

p {
    min-height: 100px;
    display: block;
    margin: 0;
    text-align: center;
    background-color: #520000;    /* 1ère ligne */
    color: white;
    word-space: break-word;
}

p:before,
p:after {
    width: 33%;
    height: 100px;
    content: " ";
    vertical-align: bottom;
    display: block;
    float: right;
    background-color: #FE2020;    /* 1ère ligne, :after */
}

p:before {
    float: left;
    clear: both;
    background-color: #FE8484;    /* 1ère ligne */
}

/* == 2e ligne */
p + p:before {    background-color: #BA0000; }
p + p {    background-color: #FE5C5C; }
p + p:after {    background-color: #DB0000; }

/* == 3e ligne */
p + p + p:before {    background-color: #6B0000; }
p + p + p {    background-color: #FE3B3B; }
p + p + p:after {    background-color: #FE4D4D; }