JSFiddle - React, Tailwind, and code Playground

by stevebeauge

HTML

<div class="cbq-layout-main picturelib-outer blocdephoto dynamic" id=cbqwpctl00_ctl33_g_be5c8ad4_cc89_492e_ac1f_57ff28afbca1 xmlns:cust="urn:contentbyquerywebpartex"><ul class="dfwp-column dfwp-list dynamic blocdephoto" style="width: 100%" data-sortby="">
<li class=dfwp-item>
<div class=kiosque-thumbnail xmlns:ddwrt="http://schemas.microsoft.com/webparts/v2/dataview/runtime"><a title="" class=openwithmode href="http://kiosque.dev/theme1/rub11/4309/publishingimages/img100.jpg" data-openmode="lightbox"><img src="http://kiosque.dev/theme1/rub11/4309/publishingimages/_w/img100_jpg.jpg" valign="absmiddle">
<div class=details>&nbsp;</div></a></div>
<div class="style-titre-1 avec-fleche-3" xmlns:ddwrt="http://schemas.microsoft.com/webparts/v2/dataview/runtime"><a class=openwithmode href="http://kiosque.dev/theme1/rub11/4309/publishingimages/img100.jpg" data-openmode="lightbox">img100</a></div></li>
<li class=dfwp-item>
<div class=kiosque-thumbnail xmlns:ddwrt="http://schemas.microsoft.com/webparts/v2/dataview/runtime"><a title="" class=openwithmode href="http://kiosque.dev/theme1/rub11/4309/publishingimages/img104.jpg" data-openmode="lightbox"><img src="http://kiosque.dev/theme1/rub11/4309/publishingimages/_w/img104_jpg.jpg" valign="absmiddle">
<div class=details>
<div class=date>12 février 2014</div></div></a></div>
<div class="style-titre-1 avec-fleche-3" xmlns:ddwrt="http://schemas.microsoft.com/webparts/v2/dataview/runtime"><a class=openwithmode href="http://kiosque.dev/theme1/rub11/4309/publishingimages/img104.jpg" data-openmode="lightbox">img104</a></div></li>
<li class=dfwp-item>
<div class=kiosque-thumbnail xmlns:ddwrt="http://schemas.microsoft.com/webparts/v2/dataview/runtime"><a title="" class=openwithmode href="http://kiosque.dev/theme1/rub11/4309/publishingimages/img102.jpg" data-openmode="lightbox"><img src="http://kiosque.dev/theme1/rub11/4309/publishingimages/_w/img102_jpg.jpg" valign="absmiddle">
<div class=details>&nbsp;</div></a></div>
<div...

CSS

.kiosque-thumbnail { position: relative; display: table-cell; width: 100px; height: 75px; border: 0px; background: #F2F1ED; vertical-align: middle; text-align: center; }

    .kiosque-thumbnail a.openwithmode { display: block; margin-bottom: -3px; width: 100px; border: 0px; }

   .kiosque-thumbnail a > div { }

  


 .kiosque-thumbnail div.details { float:left; text-align: right;  background-color: #000; opacity: 0.70; filter: alpha(opacity=70);  position: absolute; bottom: 0px;  width: 100px; }

 .kiosque-thumbnail div.details .sizes { margin-top: 2px; font-weight: bold; }

         .kiosque-thumbnail div.details .date { margin-bottom: 2px; text-transform: uppercase; }

        .kiosque-thumbnail div.details > div { display: block; margin-right: 10px; color: #FFF; }        

   .kiosque-thumbnail img { margin: auto 0px; max-width: 100px; max-height: 75px; border-width: 0px; }
 LI {
    display: inline-block;
    padding: 6px 4px 6px 0px;
    width: 100px;
    vertical-align: top;
}
.picturelib-outer {
    position: relative;
    margin: 0px;
    padding: 0px;
}
UL {
    position: relative;
    margin-top: 6px;
    margin-bottom: 6px;
}