JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<div class="headerContainer360UI">
<div class="BandContainerProduct360UI">

    <div class="divider"></div>
    
<div class="NewLightTileUI"><a href="/ViraBase/Home/ViewItem?entityId=003&amp;itemId=100000000000006"><div class="TilePicContainer"><img alt="" class="TilePic" src="/ViraBase/Home/GetItemThumbnailImage?entityId=003&amp;itemId=100000000000006&amp;elementItem=ActionTileImage&amp;displayId=004"></div><div class="TileTitle">AAAAAA</div><div class="TileSubTitle"></div><div class="TileRating"><div class="TileRatingFirst"><img alt="" src="/ViraBase/Images/Cultural/Fa/Icon/Rating/AllStar/000Star.png"></div><div class="TileRatingSecond">425 ریال</div></div><input id="iih_100000000000006" name="iih_100000000000006" type="hidden" value="100000000000006"><div class="TilePriceWish">افزودن به فهرست دلخواه</div></a></div>
    
    <div class="divider"></div>   
    
<div class="NewLightTileUI"><a href="/ViraBase/Home/ViewItem?entityId=003&amp;itemId=100000000000006"><div class="TilePicContainer"><img alt="" class="TilePic" src="/ViraBase/Home/GetItemThumbnailImage?entityId=003&amp;itemId=100000000000006&amp;elementItem=ActionTileImage&amp;displayId=004"></div><div class="TileTitle">BBBBBBBBB</div><div class="TileSubTitle"></div><div class="TileRating"><div class="TileRatingFirst"><img alt="" src="/ViraBase/Images/Cultural/Fa/Icon/Rating/AllStar/000Star.png"></div><div class="TileRatingSecond">425 ریال</div></div><input id="iih_100000000000006" name="iih_100000000000006" type="hidden" value="100000000000006"><div class="TilePriceWish">افزودن به فهرست دلخواه</div></a></div>

    <div class="divider"></div>    

    <div class="NewLightTileUI"><a href="/ViraBase/Home/ViewItem?entityId=003&amp;itemId=100000000000006"><div class="TilePicContainer"><img alt="" class="TilePic" src="/ViraBase/Home/GetItemThumbnailImage?entityId=003&amp;itemId=100000000000006&amp;elementItem=ActionTileImage&amp;displayId=004"></div><div class="TileTitle">CCCCCCCCC</div><div...

CSS

.divider{
    width: 2px;
    min-width: 2px;
    max-width: 2px;
    background-color: transparent;
}

.headerContainer360UI {
/* border: 1px dotted yellow; */
height: 500px;
line-height: 500px;
background-color: #f3f3f4;
/* background: rgba(48, 51, 58, 0.9); */
padding: 0px;
min-width: 720px;
overflow: auto;
overflow-y: hidden;    
/*    
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;*/
}

.BandContainerProduct360UI {
/*
overflow: initial;
white-space: nowrap;*/
    
width: 100%;
height: 480px;
line-height: 480px;
background-color: #f3f3f4;
    margin-top: 2px;
    /*overflow-y: hidden !important;*/
    display : flex;
    display: -webkit-box;
    display: -webkit-flex;
    
    flex-direction: row;
    -webkit-box-direction: row;
    -webkit-flex-direction: row;
    -webkit-flex-direction: row;

    
    justify-content: center;
}


.NewLightTileUI {
cursor: pointer;
width: 320px;
    min-width: 320px;    
    max-width: 320px;  
height: 480px;
line-height: 480px;
background-color: #e8e8e8;
/* text-align: center; */
display: inline-block;
margin: 0px;
padding: 0px;
flex-grow: 1;
overflow: hidden;
}