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 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 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>
            
        </ul>
       
        <ul id="information">
        	<li id="info1">
            	<div>
               		<h3>Lanterns</h3>
                    <p>These lanterns were spotted in Melaka (Malay: Melaka, dubbed The Historic State or Negeri Bersejarah among locals) which is the third smallest Malaysian state, after Perlis and Penang. It is located in the southern region of the Malay Peninsula, on the Straits of Malacca. It borders Negeri Sembilan to the north and the state of Johor to the south. The capital is Malacca City, which is 148 km south east of Malaysia's capital city Kuala Lumpur, 235 km south east to Johor's largest city...

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...