JSFiddle - React, Tailwind, and code Playground

by taginspector

HTML

<ul id="grid" class="group">
            <li>
                <div class="details">
                	<h3>Lanterns</h3>
                    <a class="more" href="#info1">view details</a> 
                </div>
               <a class="more" href="#info1"><img src="http://inspectelement.com/demos/css3/3dgallery/images/lanterns.jpg" /></a>
            </li>
            <li>
                <div class="details">
	                <h3>Tree</h3>
                    <a class="more" href="#info2">view details</a>
    			</div>
                <a href="#info2"><img src="http://inspectelement.com/demos/css3/3dgallery/images/tree.jpg" /></a>
            </li>
            <li class="end">
                <div class="details">
	                <h3>Cable Car</h3>
                    <a class="more" href="#info3">view details</a>
    			</div>
                <a href="#info3"><img src="http://inspectelement.com/demos/css3/3dgallery/images/cablecar.jpg" /></a>
            </li>
            <li>
                <div class="details">
	                <h3>London Eye</h3>
                    <a class="more" href="#info4">view details</a>
    			</div>
                <a href="#info4"><img src="http://inspectelement.com/demos/css3/3dgallery/images/londoneye.jpg" /></a>
            </li>
            <li>
                <div class="details">
	                <h3>Golden Statue</h3>
                    <a class="more" href="#info5">view details</a>
    			</div>
                <a href="#info5"><img src="http://inspectelement.com/demos/css3/3dgallery/images/statue.jpg" /></a>
            </li>
            <li class="end">
                 <div class="details">
	                <h3>Under the Bridge</h3>
                    <a class="more" href="#info6">view details</a>
    			</div>
                <a href="#info6"><img src="http://inspectelement.com/demos/css3/3dgallery/images/bridge.jpg" /></a>
            </li>
            <li>
                 <div class="details">
	               ...

CSS

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	font-weight: normal;
}
body {
	line-height:1;
}

article, aside, dialog, figure, footer, header, 
hgroup, nav, section { 
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	outline: 0;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000;	
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;	
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
	vertical-align:middle;
}


/*
Float clearing goodness from Handcrafted CSS book ------------------------------------------------------------- */
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .group { height: 1%; }
*:first-child+html .group { min-height: 1px; }

body { background: #ddd url(../images/noise.jpg); font-family: Arial, Helvetica, sans-serif; }

@font-face {
    font-family: 'BonvenoCFLight';
    src: url('../fonts/BonvenoCF-Light-webfont.eot?') format('eot'),
         url('../fonts/BonvenoCF-Light-webfont.woff') format('woff'),
  ...

JavaScript

(function(E,B){function ka(a,b,d){if(d===B&&a.nodeType===1){d=a.getAttribute("data-"+b);if(typeof d==="string"){try{d=d==="true"?true:d==="false"?false:d==="null"?null:!c.isNaN(d)?parseFloat(d):Ja.test(d)?c.parseJSON(d):d}catch(e){}c.data(a,b,d)}else d=B}return d}function U(){return false}function ca(){return true}function la(a,b,d){d[0].type=a;return c.event.handle.apply(b,d)}function Ka(a){var b,d,e,f,h,l,k,o,x,r,A,C=[];f=[];h=c.data(this,this.nodeType?"events":"__events__");if(typeof h==="function")h=
h.events;if(!(a.liveFired===this||!h||!h.live||a.button&&a.type==="click")){if(a.namespace)A=RegExp("(^|\\.)"+a.namespace.split(".").join("\\.(?:.*\\.)?")+"(\\.|$)");a.liveFired=this;var J=h.live.slice(0);for(k=0;k<J.length;k++){h=J[k];h.origType.replace(X,"")===a.type?f.push(h.selector):J.splice(k--,1)}f=c(a.target).closest(f,a.currentTarget);o=0;for(x=f.length;o<x;o++){r=f[o];for(k=0;k<J.length;k++){h=J[k];if(r.selector===h.selector&&(!A||A.test(h.namespace))){l=r.elem;e=null;if(h.preType==="mouseenter"||
h.preType==="mouseleave"){a.type=h.preType;e=c(a.relatedTarget).closest(h.selector)[0]}if(!e||e!==l)C.push({elem:l,handleObj:h,level:r.level})}}}o=0;for(x=C.length;o<x;o++){f=C[o];if(d&&f.level>d)break;a.currentTarget=f.elem;a.data=f.handleObj.data;a.handleObj=f.handleObj;A=f.handleObj.origHandler.apply(f.elem,arguments);if(A===false||a.isPropagationStopped()){d=f.level;if(A===false)b=false;if(a.isImmediatePropagationStopped())break}}return b}}function Y(a,b){return(a&&a!=="*"?a+".":"")+b.replace(La,
"`").replace(Ma,"&")}function ma(a,b,d){if(c.isFunction(b))return c.grep(a,function(f,h){return!!b.call(f,h,f)===d});else if(b.nodeType)return c.grep(a,function(f){return f===b===d});else if(typeof b==="string"){var e=c.grep(a,function(f){return f.nodeType===1});if(Na.test(b))return c.filter(b,e,!d);else b=c.filter(b,e)}return c.grep(a,function(f){return c.inArray(f,b)>=0===d})}function na(a,b){var...