JSFiddle - React, Tailwind, and code Playground

by MarkSchultheiss

HTML

<div class="project_miniwrap-b">
    <div class="project-list" id="one">
        <p class="title"><a href="#modal1"><span>Modurra Shelving</span></a>

        </p>
        <p class="tags"><span>Fabrication</span>, <span>Prototype</span>, <span>User Experience</span>

        </p>
    </div>
    <div class="project-list" id="two">
        <p class="title"><a href="#modal2"><span>Kami Bicycle Helmet</span></a>

        </p>
        <p class="tags"><span>Branding</span>, <span>User Experience</span>, <span>Prototype</span>

        </p>
    </div>
    <div class="project-list" id="three">
        <p class="title"><a href="#modal3"><span>Language Learning</span></a>

        </p>
        <p class="tags"><span>Research</span>, <span>Prototype</span>, <span>CAD & Rendering</span>

        </p>
    </div>
    <div class="project-list" id="four">
        <p class="title"><a href="#modal4"><span>Sports Innovation Challenge</span></a>

        </p>
        <p class="tags"><span>Fabrication</span>, <span>Prototype</span>

        </p>
    </div>
    <div class="project-list" id="five">
        <p class="title"><a href="#modal5"><span>Lights Out</span></a>

        </p>
        <p class="tags"><span>User Experience</span>, <span>Prototype</span>

        </p>
    </div>
    <div class="project-list" id="six">
        <p class="title"><a href="#modal6"><span>Maru Speaker Design</span></a>

        </p>
        <p class="tags"><span>CAD & Rendering</span>, <span>Branding</span>

        </p>
    </div>
    <div class="project-list" id="seven"> <span class="title"><a href="#modal7"><span>Casual Projects</span>

        </a>
        </span> <span class="tags"><span>Fabrication</span>, <span>Prototype</span>, <span>App Design</span>, <span>Branding</span>
</span>
    </div>
</div>

CSS

.project_miniwrap-b {
    position: absolute;
    margin: auto;
    left: 5%;
    top: 25%;
    -ms-transform: translateY(-25%);
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
    width:90%;
}
.project-list {
    width:20%;
    display:inline-block;
}
.projects .title span:hover {
    color:#a1a1a1;
    transition: all .1s ease-out
}
.projects .date {
    font-size:12px;
    font-family:'Theinhardt-Rg';
}
.projects .tags {
    font-size:14px;
    font-family:'Theinhardt-Rg';
}
.projects .title a {
    text-decoration:none;
}

JavaScript

var showem2 = function (me, mydelay) {
    return $(me).delay(mydelay).css('display', 'inline-block').hide().fadeIn(1000);
}
$(document).ready(function () {
    $(".project-list").each(function (i) {
        showem2($(this), 500 * (i + 1));
    });
});