JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pictures1" class="_pictures1 grid">
            <div class="_pictures1-01">
                <div style="width:125px;height: 188px; background: red;">
<!--                    <img src="" width="125" height="188" alt="" />-->
                </div>
            </div>
            <div class="_pictures1-02">
                <div style="width:192px;height: 288px;background: green;">
<!--                    <img src="" width="192" height="288" alt="" />-->
                </div>
            </div>
            <div class="_pictures1-03">
                <div style="width:325px;height: 488px; background: orange;">
<!--                    <img src="" width="325" height="488" alt="" />-->
                </div>
            </div>
            <div class="_pictures1-04">
                <div style="width:192px;height: 288px;background: blue;">
<!--                    <img src="" width="192" height="288" alt="" />-->
                </div>
            </div>
            <div class="_pictures1-05">
                <div style="width:125px;height: 188px;background: violet;">
<!--                    <img src="" width="125" height="188" alt="" />-->
                </div>
            </div>
            <div class="_pictures1-06">
                <div style="width:125px;height: 188px; background: brown;">
<!--                    <img src="" width="125" height="188" alt="" />-->
                </div>
            </div>
            <div class="_pictures1-07">
                <div style="width:192px;height: 288px;background: blueviolet;">
<!--                    <img src="" width="192" height="288" alt="" />-->
                </div>
            </div>					
        </div>

CSS

body{
                background: black;
            }
            ._pictures1{
                width: 935px;
                height: 490px;
                margin-left: 10px;
                float: left;
                top: 10%;
                left: 0;
                position: absolute;
                border: 1px gray solid;
            }
            ._pictures1 div{
                position: absolute;
            }
           
            /* Tempalate Portrait ALL Start */
            ._pictures1-01{
                top: 0px;
                left: 35px;
            }
            ._pictures1-02{
                top: 200px;
                left: 0px;
            }
            ._pictures1-03{
                top: 0;
                left: 200px;
            }
            ._pictures1-04{
                top: 0;
                left: 533px;
            }
            ._pictures1-05{
                top: 300px;
                left: 567px;
            }
            ._pictures1-06{
                top: 0;
                left: 770px;
            }
            ._pictures1-07{
                top: 200px;
                left: 733px;
            }

            /*Tempalate Portrait ALL End */