JSFiddle - React, Tailwind, and code Playground

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">
        <p class="title"><a href="#modal7"><span>Casual Projects</span></a>

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

        </p>
    </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;
}
#one {
    display:none;
}
#two {
    display:none;
}
#three {
    display:none;
}
#four {
    display:none;
}
#five {
    display:none;
}
#six {
    display:none;
}
#seven {
    display:none;
}

JavaScript

$(document).ready(function () {
	    $('#one').delay(1300).fadeIn(1000);
	    $('#two').delay(1500).fadeIn(1000);
	    $('#three').delay(1700).fadeIn(1000);
	    $('#four').delay(1900).fadeIn(1000);
	    $('#five').delay(2100).fadeIn(1000);
	    $('#six').delay(2300).fadeIn(1000);
	    $('#seven').delay(2500).fadeIn(1000);

	});