JSFiddle - React, Tailwind, and code Playground

by Nofiden Noble

HTML

<div class="fullwrap">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</div>

<div class="hasTooltip milestone">
   <div class="status-dot-green">
      <br>
      <div class="submilestone">
         <br>
         <div class="status-dot-green submile-margin">
            <div class="subStatus">Received Airing Data ESP</div>
         </div>
         <br>
         <div class="status-dot-green submile-margin">
            <div class="subStatus">Encode Request Sent </div>
         </div>
         <br>
         <div class="status-dot-green submile-margin">
            <div class="subStatus">Sent Mezz (CAM)</div>
         </div>
      </div>
   </div>
</div>

CSS

.fullwrap {
    width:300px;
    background:black;
    padding:5px;
}
.fullwrap div {
    height:30px;
    background:orange;
    margin:5px;
}
.fullwrap:hover :nth-child(1) { 
    display: none; 
}
.submile-margin{
    margin-top : 30%
}
.milestone {
    text-align: center;
}
.milestone:active :nth-child(2){
    text-align: center;
    display:none;
}
.submilestone{
    position: fixed;  
    /*display:none;*/
}
.subStatus{
    margin-left: 23px;
}
.status-dot-green {
    height: 18px;
    width: 18px;
    background-color: #A4CF72;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}