JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Experience" class="Block">
	<h4>
		Work Experience
	</h4>
	<div class="Experience">
		<div class="Date">
			<div>
				<h6 class="H6">January 2015 -<br />Present</h6>
			</div>
			<span class="Angle"></span>
		</div>
		<div class="WorkExperience">
			<h6>Boundary Protection Engineering <span>U.S. Air Force</span></h6>
			<p>System Administrator of $10 billion United States Air Force Intra-Network (AFIN) Boundary Protection Cyberspace Security and Control System Weapon System (CSCS/WS) responsible for 1,070 firewalls, proxies, and VPN’s across 121 geographically separated locations in order to evaluate, detect, prevent and implement countermeasures to protect clients, networks, and data & voice systems to include Secure Internet Protocol Routing (SIPR) network mission systems from unauthorized network activity.</p>
			<ul>
				<li>Directed 624th Operations Command (OC) U.S. Cyber Command (USCYBERCOM) mission mapping 83rd Network Operations Squadron (NOS) key weapon systems paving future for Defensive Cyber Operations (DCO) missions.</li>
				<li>Bolstered data mining capabilities by 55% by meticulously developing new Electronically Stored Information (ESI) requests logging/search process.</li>
				<li>Promptly identified and resolved critical Air Force Security Assistance Center (AFSAC) service outage identifying and resolving 8 firewall security tunnel circuits enabling $166B global peacekeeping operations.</li>
			</ul>
		</div>
	</div>
	<!-- divider -->
	<div class="Experience">
		<div class="Date">
			<div>
				<h6 class="H6">August 2013 -<br />January 2015</h6>
			</div>
			<span class="Angle"></span>
		</div>
		<div class="WorkExperience">
			<h6>Information System Security Officer/Information System Security Engineer<span>U.S. Air Force</span></h6>
			<p>System administrator/manager responsible for ensuring confidentiality, integrity, and availability of systems and networks and data through the utilization of risk analysis process. Responsibilities...

CSS

body {
		font: 13px / 23px Roboto, sans-serif;
	}
	#Experience {

	}

	#Experience h4 {
		color: #262626;
		font: normal normal 300 normal 23px / 29.12px Roboto, sans-serif;
		margin: 0px 0px 30px;
	}

	#Experience .Experience {
		box-sizing: border-box;
		color: #404040;
		display: flex;
		margin: 0 0 30px 0;
		padding: 20px 0 0 0;
		transition: all 600ms ease;
		    -webkit-transition: all 600ms ease;
    		-moz-transition: all 600ms ease;
		    -o-transition: all 600ms ease;		
	}
	
	#Experience .Experience:Hover {
		transform: translateX(20px); 
			-webkit-transform: translateX(20px);
			-moz-transform: translateX(20px); 
			-o-transform: translateX(20px);
		transform: translateY(-20px);
			-webkit-transform: translateY(-20px);
			-moz-transform: translateY(-20px); 
			-o-transform: translateY(-20px);
		transition: all 600ms ease;
		    -webkit-transition: all 600ms ease;
    		-moz-transition: all 600ms ease;
		    -o-transition: all 600ms ease;
	}
	
	#Experience .Experience .Date {
		height: 160px;
		width: 172px;
		position: relative;
		display: block;
	}

	#Experience .Experience .Date div {
		bottom: -1.5px;
		transform: matrix(1, 0, 0, 1, 20, -20);
		background: #f1f1f1;
		transition: all 600ms ease;
		    -webkit-transition: all 600ms ease;
    		-moz-transition: all 600ms ease;
		    -o-transition: all 600ms ease;
	}
	
	#Experience .Experience:Hover .Date Div {
		background: #4dbfd9;
    	box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.05);
		transition: all 600ms ease;
		    -webkit-transition: all 600ms ease;
    		-moz-transition: all 600ms ease;
		    -o-transition: all 600ms ease;
	}

	#Experience .Experience .Date h6 {
		color: #262626;
		letter-spacing: 0.8px;
		font: normal normal bold normal 15px / 24.44px Roboto, sans-serif;
		margin: 0px;
		padding: 56.75px 0px;
		text-align: center;
		transition: all 600ms ease;
		    -webkit-transition: all 600ms ease;
    		-moz-transition: all 600ms ease;
		    -o-transition: all 600ms...