JSFiddle - React, Tailwind, and code Playground

HTML

<div id="center">
        <div id="wrapper">
		
             <div class="div">
                <div class="div1">
                    <img src="https://cdn.thinglink.me/api/image/797302630824017923/1240/10/scaletowidth">
                </div>
                <div class="div2">
                    <h1>تیتر در اینجا قرار میگیرد</h1>
                    <div class="bold div4">
                        <p>توضیحات</p>
                    </div>
                </div>
            </div>
            
             <div class="div">
                <div class="div1">
                    <img src="https://cdn.thinglink.me/api/image/797302630824017923/1240/10/scaletowidth">
                </div>
                <div class="div2">
                    <h1>تیتر در اینجا قرار میگیرد</h1>
                    <div class="bold div4">
                        <p>توضیحات</p>
                    </div>
                </div>
            </div>
            
             <div class="div">
                <div class="div1">
                    <img src="https://cdn.thinglink.me/api/image/797302630824017923/1240/10/scaletowidth">
                </div>
                <div class="div2">
                    <h1>تیتر در اینجا قرار میگیرد</h1>
                    <div class="bold div4">
                        <p>توضیحات</p>
                    </div>
                </div>
            </div>
            
             <div class="div">
                <div class="div1">
                    <img src="https://cdn.thinglink.me/api/image/797302630824017923/1240/10/scaletowidth">
                </div>
                <div class="div2">
                    <h1>تیتر در اینجا قرار میگیرد</h1>
                    <div class="bold div4">
                        <p>توضیحات</p>
                    </div>
                </div>
            </div>
            
             <div class="div">
                <div class="div1">
                    <img...

CSS

::-webkit-scrollbar {
    width: 9px;
}
/* Track */
::-webkit-scrollbar-track {
    -webkit-border-radius: 2ex;
    background: chocolate;
    border: 4px dashed transparent;
    background-clip: content-box;   /* this is important*/
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: orangered;
    -webkit-border-radius: 2ex;
}
*{
    padding: 0px;
    margin: 0px;
    border: 0px;
}
a{
    text-decoration: none;
}
body{
  direction:rtl;
}
#center{
    padding-right: 15px;
    width: calc(100vw - 15px);
    background-color: rgba(200,130,150,.2);
    height: calc(100vh - 40px);
    overflow-y: scroll;
}
#wrapper{
    width:calc(100vw - 24px);
    height: calc(100vh - 40 px);
    margin: 0 auto;
    /*overflow-y: scroll;*/
    background-color: rgba(20,130,100,.5);
}
.div{
    float: right;
    width: calc(100vw / 3 - 6mm - 8px);
    height: calc((100vw / 3 - 6mm - 8px) / 2);
    border-radius: 12px;
    background-color: purple;
    margin: 3mm;
}
@media only screen and (min-width:14in)and (max-width:17.2in){
    #wrapper{
        width:calc(85vw - 24px);
    }
    .div{
        width: calc(85vw / 3 - 6mm - 8px);
        height: calc((85vw / 3 - 6mm - 8px) / 2);
    }
}
@media only screen and (min-width:17.2in){
    #wrapper{
        width:calc(65vw - 24px);
    }
    .div{
        width: calc(65vw / 3 - 6mm - 8px);
        height: calc((65vw / 3 - 6mm - 8px) / 2);
    }
}
.div1{
    height: 100%;
    width: 50%;
    float: right;
}
.div1 img{
    height: 100%;
    width: 100%;
    float: right;
    object-fit: cover;
    object-position: center;
    border-radius: 0 11px 11px 0;
}
.div2{
    height: 100%;
    width: calc(50% - 2px);
    float: left;
    position: relative;
	color: white;
}
.div2 h1{
    margin: .5vw .1vw 0 .5vw;
    font-size: 1.5vw;
}
.div4>p{
    line-height: 1.8vw;
    font-size: 1vw;
}
.div4{
    position: absolute;
    bottom: .2vw;    
}
.div2 h2{
    color: darkgrey;
    font-size: 13px;
    line-height: 22px;
}
.bold{
   ...