JSFiddle - React, Tailwind, and code Playground

HTML

<div class="project_miniwrap">
<a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a>

<a class="project-link" id="two" href="#modal2">Lights — Out  <span> (2) </span></a>

    <br>
<a class="project-link" id="three" href="#modal3">Modurra shelving  <span> (3) </span></a>

<a class="project-link" id="seven" href="#modal6">Kami  <span> (6) </span></a>

    <br>
<a class="project-link" id="four" href="#modal4">Revamping language learning  <span> (5) </span></a>

    <br>
<a class="project-link" id="five" href="#modal5">Project Luna360  <span> (4) </span></a>

    <br>
<a class="project-link" id="six" href="#modal6">A few casual projects  <span> (7) </span></a>

</div>

CSS

.project_miniwrap { position:absolute; left:3%; top:3%;} 


.project-link {
	font-family: 'UtopiaStd';	
	color:#010202;
    font-size:5.6vw;
    white-space:nowrap;
    text-decoration:none;
	margin-right: 3%;
	line-height:125%;
	border-bottom: solid transparent 2px;
	
	
}





#intro {width:34%; float:left;position:relative; left:2.5%; font-family: 'UtopiaStd';font-size:2.8em; color:#fff;}

#hello { font-size:12px; font-family: 'AtlasGrotesk';left:2.5%;position:relative; float:left; letter-spacing:0.7px; font-weight:normal; color:#fff;}


h1 { border-bottom:solid #fff 1px;padding-bottom:12px;}

ul { padding-top:15px; line-height:19px;}

.list { display: inline-block; position:relative; float:right; margin-left: 100px; right:2.5%; text-align:right;}

#profile {width:100%; position:relative;}


#table { display:table; height: 100%; width: 100%;}

#lower {
	
    width: 100%;
    position: absolute;
    bottom: 0;
	
}


#panel {
    display: none;
    height: 40vh;
    background-color: #aaaaaa;
    padding: 10px;
	overflow:hidden;
	
	
}




.project_wrap { width:100%; height:100%; position:relative; }


.project-link > span { vertical-align:super; font-size:1.3vw; font-family: 'AtlasGrotesk'; color:#010202;  font-weight: 300;}

.project-link:hover {font-style:italic;  }

.image_wrap: { width:100%;}


.image {
  
    position:absolute;
	margin: auto;
	top: 25%; left: 0; right: 0;
    width: 50%;
    z-index: -1;
	
	
}
.image img {

    width:100%;

}



.hidden {
    visibility: hidden; opacity:0;

}

#first { transition:ease-out 0.8s;}

#second { transition:ease-out 0.8s;}

#third { transition:ease-out 0.8s;}

#fourth { transition:ease-out 0.8s;}

#fifth { transition:ease-out 0.8s;}

#sixth { transition:ease-out 0.8s;}

#seventh { transition:ease-out 0.8s;}


#name0 { width:94%; overflow:hidden; padding-bottom:3%; margin: 0 auto;   font-family: 'AtlasGrotesk'; font-size:12px; letter-spacing:0.3px; font-weight:normal;}


.span_1_of_3 {


display:...