JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<ul class="mediaHeading">
    <li class="first">Type</li>
    <li>Media</li>
    <li>Description</li>
    <li></li>
    <li class="last">Edit</li>
</ul>
<ul class="mediaList">
    <li>
        <ul class="mediaInfo">
             <li class="first"><img src="test.png" alt="" height="24" width="24" />
            </li>
            <li><div class="mediaImage"><img src="test.png" alt="" /><span>test131fg</span></div>
            </li>
            <li>Last update: 2011/06/01 08:20:02<br />
                File size: 41.61 Mb
            </li>
            <li>Duration: 00:02:59<br />
Bitrate: 1949.44 kbit/s<br />
Framerate: 25.02 fps<br />
Resolution: 1024x576
            </li>
            <li class="last">
                <button class="edit">Edit</button>
            </li>
       </ul>       
    </li>
    <li>
        <ul class="mediaInfo">
            <li class="first"><img src="test.png" alt="" height="24" width="24" />
            </li>
            <li><div class="mediaImage"><img src="test.png" alt="" /><span>test131fg</span></div>
            </li>
            <li>Last update: 2011/06/01 08:20:02<br />
                File size: 41.61 Mb
            </li>
            <li>Duration: 00:02:59<br />
Bitrate: 1949.44 kbit/s<br />
Framerate: 25.02 fps<br />
Resolution: 1024x576
            </li>
            <li class="last">
                <button class="edit">Edit</button>
            </li>
       </ul>       
    </li>
</ul>

CSS

ul.mediaHeading {
    margin: 10px 2%;
    padding: 0;  
    border-bottom: 1px solid #ccc; 
    width: 96%;
    overflow: hidden;   
    display: table;
}

ul.mediaHeading li {
    list-style-type: none;
    margin: 0;
    padding: 5px 0;
    font-size: 90%;
    width: 26%;
    display: table-cell;
}

ul.mediaHeading li.first {
    width: 10%;
}

ul.mediaHeading li.last {
    width: 10%;
}

ul.mediaList{
    margin: 0 2%;
    padding: 0; 
    width: 96%;
    overflow: hidden;   
 
}

ul.mediaInfo {
    margin: 0;
    padding: 0;    
    width: 100%;
    height: 89px;
    border-bottom: 1px solid #ccc;
    display: table;
}

ul.mediaList li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: list-item;
}

ul.mediaInfo li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 70%;
    line-height: 120%;
    width: 26%;
    display: table-cell;
    vertical-align: middle;
}

ul.mediaInfo li.first {
    width: 10%;
}

ul.mediaInfo li.last {
    width: 10%;
}

.mediaImage {
    width: 120px;
    height: 67px;
    position: relative;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    display: block;
}

.mediaImage img {
    width: 120px;
    height: 67px;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.mediaImage span {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 110%;
    line-height: 67px;
    text-align: center;
    word-wrap: break-word;
    opacity: 0.6;
    filter:alpha(opacity=60);
    background-color: #fff;
    color: #000;
}

button.edit {
    line-height: 1; 
    color: #444;
    margin: 0;
    padding: 8px 0;
    text-align: center;
    vertical-align: middle;
    width: 70%;
}