JSFiddle - React, Tailwind, and code Playground

by johanthuresson

HTML

<span id="prog">

<div class="fiverowdiv">
    
    <div class="flowrow">	
        <span class="agiiconbox">123</span>
        <span class="dynamocon" id="dc1">
        <li>ContentContentContentContentContent</li>
        <li>ContentContentContentContentContent</li>
        <li>ContentContentContentContentContent</li>
        </span>
         <span class="agiiconbox">456</span>
   
        <span class="dynamocon" id="dc2">
        <li>INFOINFOINFOINFOINFOINFOINFOINFO</li>
        <li>INFOINFOINFOINFOINFOINFOINFOINFO</li>
        </span>
          <span class="agiiconbox">789</span>
        
        <span class="dynamocon" id="dc3">
        <li>datadatadatadatadatadatadatadatadata</li>
        <li>datadatadatadatadatadatadatadatadata</li>
        </span>
         <span class="agiiconbox">012</span>         
        <span class="dynamocon" id="dc4">
        <li>ContentContentContentContentContent</li>
        <li>datadatadatadatadatadatadatadatadata</li>
        </span>
        
    </div>
</div>
</span>

CSS

body
{
   background:grey; 
}
.fiverowdiv {
    margin-top:2%;
    width:100%;
    height:70%;
    font-size:20px;
    line-height:28px;
    font-family:Raleway Thin, Candara, Calibri;
    letter-spacing:2px;
    font-weight:bold;
    /*background:powderblue;*/
}
.flowrow {
    width:100%;
    height:20%;
}
.flowrow:nth-child(4) {
    height:40%;
}

.agiiconbox {
    text-align:center;
    display:inline-block;
    width:15%;
    height:80%;
    border:1px solid white;
    overflow:hidden;
    line-height: 28px;
    transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -webkit-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
}
.agiiconbox:hover {
    border:1px solid rgba(0, 0, 0, 0);
    background:rgba(114, 133, 184, 0.2);
    cursor:pointer;
    box-shadow: 0.2px 0.2px 10px 0px #000;
    -o-box-shadow: 0.2px 0.2px 10px 0px #000;
    -moz-box-shadow: 0.2px 0.2px 10px 0px #000;
    -webkit-box-shadow: 0.2px 0.2px 10px 0px #000;
    -ms-box-shadow: 0.2px 0.2px 10px 0px #000;
}
.dynamocon {
    display:block;
    width:63.2%;
    height:65%;
    /*border:1px solid white;*/
    background:rgba(114, 133, 184, 0.2);
    overflow:hidden;
    margin-top:2%;
    padding-top:2%;
    line-height: 28px;
    font-size:17px;
    text-align:left;
    box-shadow: 0.2px 0.2px 10px 0px #000;
    -o-box-shadow: 0.2px 0.2px 10px 0px #000;
    -moz-box-shadow: 0.2px 0.2px 10px 0px #000;
    -webkit-box-shadow: 0.2px 0.2px 10px 0px #000;
    -ms-box-shadow: 0.2px 0.2px 10px 0px #000;
}
.dynamocon li {
    padding-left:2%;
}

#agiiconbox:hover #dc1
{
    display:block;
}

#dc1, #dc2, #dc3, #dc4 {
    display:none;
}

.agiiconbox:hover + span{
    display:block!important;
}