JSFiddle - React, Tailwind, and code Playground

by ZEZEME

HTML

<div id=PgThree>
	<div class=main3>
		<div class=Experience>Experience</div>
		<div class=Rh1></div>
		<div class=Rh2></div>
	</div>
	<div class=TransparentBox>
		<div class=Hackital>
			<div class=Logo>
				<div class=Sq1></div>
				<div class=Sq2></div>
				<img src="Pics/Logos/Hackital.png" class=LogoImg>
			</div>
			<div class=Text>
				<span class=Position>Hackital</span><br>
				<span class=CompandTime>George Washington University | Nov 10, 2018</span><br><br>
				<span class=Body>Hackital is a Hackathon held at George Washington University.  At the hackathon, I explored BlockChain and cryptocurrency. Written in Solidity, I created a donation program  that processes ethereum exchanges and donations to charity.</span>
			</div>
		</div>
		<div class=Student>
			<div class=Logo>
				<div class=Sq1></div>
				<div class=Sq2></div>
				<img src="Pics/Logos/Tundie.png" class=LogoImg>
			</div>
			<div class=Text>
				<span class=Position>Student</span><br>
				<span class=CompandTime>University of Virginia | 2017-2021</span><br><br>
				<span class=Body>I am currently a 2nd year student at the University of Virginia, majoring in computer science. After graduation, I hope to pursue a career in web development, software development, or data science.</span>
			</div>
		</div>
	</div>
</div>

CSS

#PgThree {
    background-color: #181818;
    height: 100%;
    width: 100%;
}
.main3 {
    display: flex; justify-content: center;
    align-items: center;
    height: 250px;
    padding-top: 75px;
    padding-bottom: 100px;
}
.Experience {
    font-size: 45px; /*! change with media query */
    font-family: 'Sail', cursive;
    color: white;
    
    z-index: 2;
    display: flex; justify-content: center;
    align-items: center;
}
.Rh1 {
    position: absolute;
    border: 1px solid #DAA520;
    box-sizing: border-box;
    transform: rotate(33deg);
    width: 200px;
    height: 200px;
    z-index: 1;
}
.Rh2 {
    position: absolute;
    border: 1px solid #DAA520;
    box-sizing: border-box;
    transform: rotate(45deg);
    width: 200px;
    height: 200px;
    z-index: 1;
}
.TransparentBox {
    font-family: 'Raleway', sans-serif;
    background-color: rgba(250,250,250,.85);
    
    display: flex; 
    justify-content: center;
    align-items: center;

    z-index: -1;

    height: 100%; width: 70%;
    margin: 50px auto;
    padding: 100px 50px;
}
.TransparentBox div {
    display: inline-block;
    align-self: flex-start;
}
.Logo {
    height: 220px; width: 185px;
}
.LogoImg {
    height: 150px; width: 150px;
    margin: 35px 0px 0px 35px;
}
.Sq1 {
    position: absolute;
    border: 1px solid #DAA520;
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    z-index: 1;
}
.Sq2 {
    position: absolute;
    border: 1px solid #DAA520;
    box-sizing: border-box;
    margin: 20px 0px 0px 20px;
    width: 200px;
    height: 200px;
    z-index: 1;
}
.Text {
    height: 100%; width: 220px; 
    margin: 15% auto;
    padding-left: 35px;
    text-align: center;
    line-height: 1.25em;
}
.Position{
    font-size: 17px; /*! change with media query */
    font-weight: 600;
}
.CompandTime {
    font-size: 13px; /*! change with media query */
    font-weight: 300;
    font-style: italic;
}
.Body {
    font-size: 14px;
    font-weight: 300;
}
.Hackital,...