JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<ul>
    <li> 
        
       <div class=statewrap>
           <div class=state><span class=finished></span></div>        
       <div class=hoverwrap><span class=title>Lager 
           prüfen</span><span class=iconset>
                          <i class="fa fa-pencil-square-o fa-1x off"></i> 
                          <i class="fa fa-envelope-o fa-1x off"></i> 
                          <i class="fa fa-file-pdf-o fa-1x off"></i> 
                          <i class="fa fa-camera fa-1x off"></i> 
                          <i class="fa fa-calendar fa-1x off"></i> 
                          <i class="fa fa-sitemap fa-1x off"></i> 
                          <i class="fa fa-trash-o fa-1x off"></i> 
                          <i class="fa fa-cog fa-1x off"></i>
           </span>
       </div>
           
           <div class=multi>
                PANE
           </div>
 </div>       
    </li>
       <li> 
        
       <div class=statewrap>
           <div class=state><span class=finished></span></div>        
       <div class=hoverwrap><span class=title>Lager 
           prüfen</span><span class=iconset>
                          <i class="fa fa-pencil-square-o fa-1x off"></i> 
                          <i class="fa fa-envelope-o fa-1x off"></i> 
                          <i class="fa fa-file-pdf-o fa-1x off"></i> 
                          <i class="fa fa-camera fa-1x off"></i> 
                          <i class="fa fa-calendar fa-1x off"></i> 
                          <i class="fa fa-sitemap fa-1x off"></i> 
                          <i class="fa fa-trash-o fa-1x off"></i> 
                          <i class="fa fa-cog fa-1x off"></i>
           </span>
       </div>
           
           <div class=multi>
                PANE
           </div>
 </div>       
    </li>
      
          <li> 
        
       <div class=statewrap>
           <div...

CSS

ul { list-style:none; padding:0px; }

li > ul { margin-left:30px; }
 
li { font-size:13pt; display:block; width:230px; min-height:30px; background:lime;
border-bottom:1px solid white; }

.statewrap { 
}

.state {   display:inline-block;  border:none; width:25px;height:25px;padding-top:6px;padding-bottom:0px;text-align:center;}

.state span.finished:before {
    font-family:"FontAwesome";
    content: "\f046";
}
 

.state span.active:before {
    font-family:"FontAwesome";
    content: "\f013";
}


.state span.open:before {
    font-family:"FontAwesome";
    content: "\f096";
}

.hoverwrap  {display:inline-block; }

.hoverwrap span { font-family:sans-serif; display:inline-block; width:195px;min-height:25px;   }

.hoverwrap .iconset { display:none;  }

.hoverwrap:hover .title { display:none; }
.hoverwrap:hover .iconset { display:inline-block;   }

.multi {
    display:block;
    margin-left:10px;
}

.off { opacity:.34; }
.off:hover {opacity:1;}

JavaScript

$(".state").click(function() { 
    $(this).children("span").toggleClass("finished open active");
});