JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<div class="output-Main-Div">


<div class="output-Container">1
</div>
<div class="output-Container">2
</div>
<div class="output-Container">3
</div>
<div class="output-Container">4
</div>
</div>









<?php





}





} else {

echo "0 results";

}

$link->close();



?>







</div>

CSS

.output-Main-Div{
width: 100%;
height: 310px;
overflow-x: scroll;
overflow-y: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content:space-around;
    align-items:center;

}

.output-Container{
height: 80%;
width:24%;
display:flex;
background:red;
  align-self: auto;
}



.output-Container:hover{

width: 40%;

height: 100%;

}