JSFiddle - React, Tailwind, and code Playground

by jacobdubail

HTML

<script src="https://raw.github.com/jackmoore/colorbox/master/colorbox/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="https://raw.github.com/jackmoore/colorbox/master/example1/colorbox.css">
<h1 class="project-title">Education</h1>
<div class="project-header">
    <div class="header-left">
        <a id="inline" class="colorbox"> 
            <img src="http://sdaarchitects.com/storage/post-images/test.jpg?__SQUARESPACE_CACHEVERSION=1329937057694" alt="" /> 
        </a>
<p>The act or process of educating; the result of educating, as determined by the knowledge skill, or discipline of character, acquired; also, the act or process of training by a prescribed or customary course of study or discipline; as, an education for the bar or the pulpit; he has finished his education.</p>
    </div>
</div>

<div id="projects" class="hide">
    
<h2>Projects</h2>
<div class="project-columns cf">
<ul>
<li>
<h3>Higher Education</h3>
</li>

<li> <a href="/waynesville-elementary"> <img src="http://placehold.it/210x140/fafafa&amp;text=Waynesville" alt="" /> </a> </li>
<li> <a href="/waynesville-elementary"> <img src="http://placehold.it/210x140/fafafa&amp;text=Waynesville" alt="" /> </a> </li>
<li> <a href="/waynesville-elementary"> <img src="http://placehold.it/210x140/fafafa&amp;text=Waynesville" alt="" /> </a> </li>
<li><a href="/waynesville-elementary"><img src="http://placehold.it/210x140/fafafa&amp;text=Waynesville" alt="" /></a></li>
</ul>
<ul>
<li>
<h3>High Schools</h3>
</li>
<li> <a href="/waynesville-elementary"> <img src="http://placehold.it/210x140/fafafa&amp;text=Waynesville" alt="" /> </a> </li>
<li> <a href="/waynesville-elementary"> <img src="http://placehold.it/210x140/fafafa&amp;text=Waynesville" alt="" /> </a> </li>
<li> <a href="/waynesville-elementary"> <img src="http://placehold.it/210x140/fafafa&amp;text=Waynesville" alt="" /> </a> </li>
<li> <a href="/waynesville-elementary"> <img src="http://placehold.it/210x140/fafafa&amp;text=Waynesville"...

CSS

.hide { display: none; }
#colorbox .hide { display: block; }