JSFiddle - React, Tailwind, and code Playground

by Cosette Girardot

HTML

<div id="links">	
      <div id="districtareas"></div>
      <a href="http://www.emich.edu/dining/eaglecafes/eagle_cafe.php"><div id="eaglecafe"></div></a>
   			<a href="http://www.emich.edu/dining/crossroads/crossroadsfoodcourt.php"><div id="crossroads"></div></a>
			<a href="http://www.emich.edu/dining/thecommons/thecommons.php"><div id="commons"></div></a>
    		<a href="http://www.emich.edu/dining/studentcenter/studentcenter.php"><div id="studentcenter"></div></a>
            <a href="http://www.emich.edu/dining/eateries/easterneateries.php"><div id="ee"></div></a>
           	<a href="http://www.emich.edu/dining/EMUDining/Catering/EMUCatering.php"><div id="catering"></div></a>
	  </div>

CSS

#links{
	height: auto;
	position: absolute;
	width: 100%;
	z-index: 4;
	top: 50%;
	margin-left:1%;
	margin-right: 4%;
	margin-top: 4%;
	left: 4%;
	right: auto;
}
#eaglecafe{
	background-image:url(images/eaglecafe.jpg);
	background-size: 230px 38px;
	width: 230px;
	height:38px;
	margin-top: 2px;
}
#eaglecafe:hover {
	background-image:url(images/eaglecafeonclick.jpg);
	background-size: 230px 38px;
}
#eaglecafetriangle{
	border-top:25px solid green;
	height: 0;
	position:absolute;
	width: 0;
	z-index:3;	
	border-right: 25px solid transparent;
	height: 0;
	position:absolute;
	width: 0;
	z-index:5;
	border-top-color: rgb(16,206,61);
}
#crossroads{
	background-image:url(images/crossroads.jpg);
	background-size: 230px 38px;
	width: 230px;
	height:38px;
	margin-top:2px;
}
#crossroads:hover{
	background-image:url(images/crossroadsonclick.jpg);
	background-size: 230px 38px;
}
#crossroadsstriangle{
	border-top:25px solid green;
	height: 0;
	position:absolute;
	width: 0;
	z-index:3;	
	border-right: 25px solid transparent;
	height: 0;
	position:absolute;
	width: 0;
	z-index:5;
	border-top-color: rgb(255,138,0);
}

#commons{
	background-image:url(images/commons.jpg);
	background-size: 230px 38px;
	width: 230px;
	height:38px;
	margin-top: 2px;
}
#commons:hover{
	background-image:url(images/commonsonclick.jpg);
	background-size: 230px 38px;
}
#commonstriangle{
	border-top:25px solid green;
	height: 0;
	position:absolute;
	width: 0;
	z-index:3;	
	border-right: 25px solid transparent;
	height: 0;
	position:absolute;
	width: 0;
	z-index:5;
	border-top-color: rgb(120,3,105)
}
#studentcenter{
	background-image:url(images/studentcenter.jpg);
	background-size: 230px 38px;
	width: 230px;
	height:38px;
	margin-top:2px;
}
#studentcenter:hover{
	background-image:url(images/studentcenteronclick.jpg);
	background-size: 230px 38px;
}
#studentcentertriangle{
	border-top:25px solid green;
	height: 0;
	position:absolute;
	width: 0;
	z-index:3;	
	border-right: 25px solid transparent;
	height:...