JSFiddle - React, Tailwind, and code Playground

by vaibhav saxena

HTML

<div id='parentContainer'>
    <ul class='imageContainer'>
        <li class='exper1'>aaa</li>
        <li class='exper2'>bbb</li>
        <li class='exper3'>ccc</li>
        <li class='exper4'>ddd</li>
        <li class='exper5'>eee</li>            
     <ul>   
</div>

CSS

.exper1,.exper2,.exper3,.exper4,.exper5{
    height:100px;
    width:100px;
    border:2px solid green;
    display:block;
    float:left;
    line-height:100px;
    padding:10px;
    text-align:center;
    overflow:hidden;
    display: none;
    overflow: hidden;
}
.imageContainer{
    height:104px;
    width:104px;
    border:2px solid blue;
    text-align: center;
    padding:40px;   
}
.exper1{
    display: block;
}