JSFiddle - React, Tailwind, and code Playground

by gchoken

HTML

<ul class="photo-wireframe">
     <li>&nbsp;</li>
     <li>&nbsp;</li>
     <li class="semi-large">&nbsp;</li>
     <li class="double-large highlight">&nbsp;</li>

     <li>&nbsp;</li>
     <li>&nbsp;</li>
     <li>&nbsp;</li>
     <li>&nbsp;</li>    
</ul>

CSS

ul.photo-wireframe{
    list-style:none;
    display:block;
    width:176px;
    border:1px solid;
    padding :2px;
    float:left;
}
ul.photo-wireframe li {
    border:1px solid;
    float:left;
    display:block;
    width:40px;
    margin :1px;
    content: "\007C\00a0\00a0";
}
ul.photo-wireframe li.semi-large{
     width:84px;
}
ul.photo-wireframe li.double-large{
     width:84px;
     height:40px
}
ul.photo-wireframe li.highlight{
    background-color:#F7E4A8;
}
ul.photo-frame li.selected{
    background-color:#14BA14;
}