JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 

<html>

<head>

	<meta charset="UTF-8">
	<title>ICT and Defence</title>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
	<link rel="stylesheet" type="text/css" href="responsive.css">
    <!--THIS IS WHERE IM TRYING TO ADD IN THE JQuery WHICH DOESNT SEEM TO WORK-->
	<script src="myScript.js"></script>
	<script type="text/javascript" src="WPKEY/106website/jquery-1.11.3.min.js"></script>
	<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     
	<link href='http://fonts.googleapis.com/css?family=Lobster|Oswald|Pacifico|Bangers|Anton|Sigmar One' rel='stylesheet' type='text/css'>

	
	<script type="text/javascript">
	
		$(document.read(function()
		{
			alert("hello");
		
		}
		
	</script>
	
</head>

<body>



	<header>

		<div id="header-container">
			<h1>ICT and Defence</h1>
		</div>	
		<!--Navigation-->
			<nav>
					<div id="nav-wrapper">
							<ul id="main-menu">
								<li><a class="item1" href="index.html">Home</a></li>
								<li><a class="item1" href="drones.html">Drones</a></li>
								<li><a class="item1" href="communication.html">Communication</a></li>
								<li><a class="item1" href="future.html">Future Soldiers</a></li>
							</ul>
					</div>
			</nav>
	</header>

	<div id="container">

		
		<div id="center-div">

			<div id="home-video">
				<h3>Australia and Defence</h3>
				<h4 class="h4-home">Drones</h4>	
				<iframe src="https://www.youtube.com/embed/SNPJMk2fgJU" frameborder="0" allowfullscreen></iframe>
				<p class="p-home">Prototype Quadrotor with Machine Gun!</p>
			</div>

			<div id="home-video2">
				<h4 class="h4-home">Future Of Defence</h4>
				<iframe src="https://www.youtube.com/embed/S3VIpw0HAko" frameborder="0" allowfullscreen></iframe>
				<p class="p-home">Top 10 Futuristic Military Weapons in Development</p>
			</div>
			
			<div id="home-video3">
				<h4...

CSS

/************
General ;
************/

body {
	margin: 0;
	padding: 0;
	background: #f6f6f6;
}

a {
	text-decoration: none;
	color: black;
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'Bangers', cursive;
	font-size: 20px;
}

li {
	list-style-type: none;
}

#home-instagram iframe {
	width: 100%;
	height: 100%;
}


iframe{
	margin: 0;
	padding: 0;
	margin: 0 auto;
	display: block;
	border: 5px solid;
	width: 80%;
	height: 500px;
}

img {
	margin: 0;
	padding: 0;
}

p {
	font-family: 'Bangers', cursive;
}


/************
Header ;
************/


header {
	background-color: black;
	margin: 0;
}

header h1 {
	margin: 0;
	padding: 0;
	text-align: center;
	float: left;
	color: white;
	font-family: 'Oswald';
	font-size: 70px;
}


/************
Socail-Div // Header // Not implemented yet;
************/

#header-container {
    margin: 0 auto;
    padding: 0;
    width: 55%;

}

#socail-div iframe{
	margin: 0;
	padding: 0;
}

#socail-div {
	margin: 0;
	padding: 0px;
	clear: both;
	float: left;
}

.header-icon img{
	margin-right: 20px;
	width: 40px;
	float: left;
}



/************
Navigation ;
************/


#nav-wrapper {
    margin: 10px auto;
    width: 83%;
    clear: both;
}


#main-menu {
	margin: 0;
	padding: 0;

}

#main-menu > li {
	text-align: center;
	margin: auto;
	float: left;
	width: 20%;
}

#main-menu > li a {
	display: block;
	padding: 10px 0;
	font-size: 26px;
}

#main-menu,a:hover {
	background-color: #7B7B7B;
}
#main-menu, a:active {
	background-color: #626262;
}
a.selected {
	border-bottom: solid 2px;
}



/************
Container // for the body content;
************/

#container {
	overflow: auto;
	clear: both;
	width: 100%;
	height: 100%;
	margin: 200px auto;
	padding: 0;
	/*background-color: yellowgreen;*/

}


/************
Wrapper ;
************/

#center-div {
	
	width: 80%;
	padding: 2% 4%;
	background-color: #fefefd;
	margin: 20px auto;
	border: 1px solid;
	
	box-shadow: 0 0 20px #000;
}

/************
Side Wrappers;...

JavaScript

$(document).ready(function() {
	var showChar = 100;
	var ellipsestext = "...";
	var moretext = "Expand";
	var lesstext = "Hide";
	$('.more').each(function() {
		var content = $(this).html();

		if(content.length > showChar) {

			var c = content.substr(0, showChar);
			var h = content.substr(showChar-1, content.length - showChar);

			var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

			$(this).html(html);
		}

	});

	$(".morelink").click(function(){
		if($(this).hasClass("less")) {
			$(this).removeClass("less");
			$(this).html(moretext);
		} else {
			$(this).addClass("less");
			$(this).html(lesstext);
		}
		$(this).parent().prev().toggle();
		$(this).prev().toggle();
		return false;
	});
});

/* menu selected */

$('.item1').click(function(e){
    $('.item1').css("color", "black");
    $(this).css("color", "red");
});