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: center;
    align-content:space-between;
    align-items: center;

}



.output-Container{


height: 80%;
display:flex;
margin: 0% 0.25% 0% 0.25%;
background:red;
    flex:1;
    align-self: auto;
}



.output-Container:hover{

width: 40%;

height: 100%;

}