JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top-container">
        
            <div class="player p1">
               <div>
                   <span> isim </span>
               </div>
               <div>
                   <img src=""></img>
                </div> 
            </div>
            

             <div class="player p2">
            </div>
            
        </div>


<div>
</div>

<div>
</div>

CSS

.top-wrapper {
   width: 800px; 
}

#top-container {
 
   background-color: red;
   border:1px solid yellow;
overflow: auto;
    width: 264px;
    margin: auto; 
    
     
}

.player { 
  border:1px solid black;  
  width : 110px;
  height : 110px; 
    float: left;
        margin:10px;

}


.player .p1 {



   
}

.player .p2 { 


    
}