JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://github.com/imjessw/Kendall_Gregory/blob/master/KG.Js"></script>
	<body> 
		<div>
			<a href="Html/MenuPage.html">
				<img id="topMenu" src="http://s4.postimg.org/7636jv04p/menu_Top.png">
			</a>
		</div>

		<img id="headerImage" src="http://s16.postimg.org/uqbzk51yd/Header.png">

		<div class ="card">
			<div class="no-hover"> 
				<!-- <span class = "caption"> Fade </span> -->
				<img class="left Fade" src="http://s16.postimg.org/monr28j6t/Fade_Mag.png">
				<!-- hover image -->
			</div>
			<div class="on-hover">
				<a href="Html/Fade.html">
					<img class="left Fade" src="http://s21.postimg.org/o0f1chw13/Xenia_Lally_Hover.png">
				</a>
			</div>
		</div>


		<!-- GE -->

		<div class ="card">
			<div class="no-hover"> 
			
				<!-- <span class = "caption"> GE </span> -->
				<img class="whiteOverlay right GE" src="http://s16.postimg.org/6vislrw9x/image.png">
			</div>
			<div class="on-hover">
				<a href="Html/GE.html">
					<img class="whiteOverlay right GE" src="http://s21.postimg.org/6yhlwnrs7/GE_hover.png">
				</a>
			</div>
		</div>


		<!-- Kaleidoscope -->
		<div class ="card">
			<div class="no-hover"> 
				<img class="left KALEIDOSCOPE " src="http://s16.postimg.org/5fcc0qzol/KALEIDOSCOPE_Thumb.png">

			</div>
			<div class="on-hover mt100">
				<a href="Html/Pantene.html">
					<img class="left KALEIDOSCOPE" src="http://s16.postimg.org/7q5c7t44l/KALEIDOSCOPE_Thumb_hover.png">
				</a>
			</div>
		</div>

		<!-- AOHH -->

		<div class ="card">
			<div class="no-hover"> 
				<img class="right ArtofHealthyHair" src="http://postimg.org/image/n7subiald/">

			</div>
			<div class="on-hover">
				<a href="Html/AOHH.html">
					<img class=" right...

CSS

/*Landing Page*/
@font-face {
    font-family: 'brandon_grotesque_regularRg';
    src: url('brandon_reg-webfont.eot');
    src: url('brandon_reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('brandon_reg-webfont.woff2') format('woff2'),
         url('brandon_reg-webfont.woff') format('woff'),
         url('brandon_reg-webfont.ttf') format('truetype'),
         url('brandon_reg-webfont.svg#brandon_grotesque_regularRg') format('svg');
    font-weight: normal;
    font-style: normal;
    letter-spacing: px;
	-webkit-font-feature-settings: "kern";
  	-moz-font-feature-settings: "kern";
  	-moz-font-feature-settings: "kern=1";

}
@import url("//hello.myfonts.net/count/2e1b5b");

@font-face {
	font-family: 'NarzissMedium-Drops';
	src: url('2E1B5B_0_0.eot');
	src: url('2E1B5B_0_0.eot?#iefix') format('embedded-opentype'),
	url('2E1B5B_0_0.woff2') format('woff2'),
	url('2E1B5B_0_0.woff') format('woff'),
	url('2E1B5B_0_0.ttf') format('truetype');
}


body{
	margin: 0px;
	border: black 10px solid;
	font-family: 'brandon_grotesque_regularRg', Arial, sans-serif;
	line-height: normal;
}


a{
	text-decoration: none;
	color: black;
}

#topMenu{
	right: 20px;
	position: fixed;
	letter-spacing: 4px;
	z-index: 24;
	-webkit-font-feature-settings: "kern";
  	-moz-font-feature-settings: "kern";
  	-moz-font-feature-settings: "kern=1";
	
}

.MenuBar{
	text-align: center;
	width: 65%;
	margin:17 auto;
	text-decoration: none;
	letter-spacing: 2px;
	-webkit-font-feature-settings: "kern";
  	-moz-font-feature-settings: "kern";
  	-moz-font-feature-settings: "kern=1";


}
.consocials{
	bottom: 40;
	margin-left: 70px;
	margin-right: 70px;
	width: 80%;
	text-decoration: none;
}

.consocials:hover{
	border-bottom:solid black 2px;
	padding-bottom: 20px;
	text-decoration: none;
	color: black;	
}

.socials{
	margin-right: 20px;
	margin-left: 20px;
	color: black;
	text-decoration: none;
	text-transform: uppercase;
}
.socials:hover{
	border-bottom:solid black 2px;
	padding-bottom:...