JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<div class="contentList">
<ul>
    <li class="Element" data-rel="/menu/cat" class="selected">
        <span class="boxxi">
<img src="http://icons.iconarchive.com/icons/thvg/wood-folders/128/Glossy-Applications-icon.png">
        <span>Category:</span></span>   
<div class="Moomentum">
<div class="SimpleList">
<ul>
    <li class="Element" data-rel="/menu/ve/cat/sel0">Auto</li>
<li class="Element" data-rel="/menu/ve/cat/sel1">Bus</li>
</ul>
    
</div>
</div>
</li>
            <li class="Element" data-rel="/menu/cat">
        <span class="boxxi">
<img src="http://icons.iconarchive.com/icons/thvg/wood-folders/128/Glossy-Applications-icon.png">
        <span>Brand:</span></span>
    </li><li class="Element" data-rel="/menu/cat">
        <span class="boxxi">
<img src="http://icons.iconarchive.com/icons/thvg/wood-folders/128/Glossy-Applications-icon.png">
        <span>Brand:</span></span>
    </li><li class="Element" data-rel="/menu/cat">
        <span class="boxxi">
<img src="http://icons.iconarchive.com/icons/thvg/wood-folders/128/Glossy-Applications-icon.png">
        <span>Brand:</span></span>
    </li><li class="Element" data-rel="/menu/cat">
        <span class="boxxi">
<img src="http://icons.iconarchive.com/icons/thvg/wood-folders/128/Glossy-Applications-icon.png">
        <span>Brand:</span></span>
    </li><li class="Element" data-rel="/menu/cat">
        <span class="boxxi">
<img src="http://icons.iconarchive.com/icons/thvg/wood-folders/128/Glossy-Applications-icon.png">
        <span>Brand:</span></span>
    </li><li class="Element" data-rel="/menu/cat">
        <span class="boxxi">
<img src="http://icons.iconarchive.com/icons/thvg/wood-folders/128/Glossy-Applications-icon.png">
        <span>Brand:</span></span>
    </li>
</ul>
</div>

CSS

.Element img{
    width:2em;
    height:2em;
}

.boxxi img+span{
    -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
    display:block;
    padding-top:0.5em;
}
.boxxi{
  /* flexbox setup */
  display: -webkit-box;
  -webkit-box-orient: horizontal;

  display: -moz-box;
  -moz-box-orient: horizontal;
  outline:1px solid purple;
  display: box;
  box-orient: horizontal;
width:100%;
}

ul{outline:1px solid grey;}
li{outline:1px solid red;}
span{outline:1px dashed yellow;}
div{outline:1px dotted blue;}
.contentList{
/* flexbox setup */
  display: -webkit-box;
  -webkit-box-orient: vertical;

  display: -moz-box;
  -moz-box-orient: horizontal;
  outline:1px solid purple;
  display: box;
  box-orient: horizontal;
width:100%;
}