JSFiddle - React, Tailwind, and code Playground

by Charlie Fry

HTML

<body>
<Nav/> <!-- Style for Navigation bars !-->
	<ul class = "navbar">  <!-- Bulleted list (Nav bar) created a class so i can refrence it in the style sheet and syle it later !-->
		<li> <a href="Home.HTML" id="OnPage">HOME</a> </li> <!-- OnPage makes it so the tab of the page the user on turns white, to indicate what page they are currently viewing !-->
		<li> <a href="Mobile.HTML">MOBILE</a> </li>	
		<li> <a href="Customer.HTML">CLOUD </a> </li>	
		<li> <a href="Data.HTML">CUSTOMER </a> </li>	
		<li> <a href="Cloud.HTML">DATA</a> </li>	
		<li> <a href="Bibliography.HTML">BIBLIOGRPAHY</a> </li>	
	</ul> <!-- End of bulleted list for nav bar !-->			
</Nav> <!-- End of the navigation bar style !-->

<div id="NavbarBlack"></div> <!-- Black bar that the nav bar fits into !-->

<img id="serv" src="https://gyazo.com/aa4e51ef8ca7faed77258ee09fad8508.jpg" alt="Server Room" Title = "Server Room"> </img>


<h1 class="Headstyle">
INFO101: Computing Concepts 
</h1>


</body>
</html>

CSS

body
{
	margin:0;/* Removes margins of the page, so elements can go right to the end creating a cleaner apperance */
} 

#NavbarBlack
{
   width:100%; /* sets the navbar to only go to the width of the screen */
   height:50px; /*Sets the height of the nav bar */
   background-color:black; /*Sets the colour of the navbar to black */
}
	
.navbar
{
	margin: 0; /* Allow the navbar to be at the very top of the page */
}
			
.navbar>li
{
	list-style-type: none; /* Removes the bullet points from this list */
	float: left; /* Makes the navbar text (sub page list) go out horizontal, as opposed to down vertically */
	margin-top: 12px; /* Positions the navbar text 12 pixels from the top of the page */
	margin-left:15px; /* Positions the navbar text 12 pixels from the left page border */
}	

.navbar>li>a
{
	text-decoration: none; /* Takes away the default list style (underline) */
	color: white; /* Sets the colur of the text to white */
	font-family: "Lato", sans-serif; /* Sets the font to the previously refrenced font via a google API, this allows anyone, on any device to view this font, reguardless of the font being local to the users device. */
	font-size: 23px; /* Sets the font size to a modest 23 pixels */
}

li>a:hover /* Highlights elements when the mouse is hovering over them */
{
	background-color: #404142; /* Sets the colour of the highlight to #404142(darkish grey) */
	border-radius: 10px; /* Sets a radius around the border, giving it curved edges (not a rectangle) */
} 
			
					
			
@media screen and (max-width:1250px) /* triggers the following elements to change when the page width is enqual to less than 1250 pixels */
{				
	.navbar>li
	{
		margin-top: 14px; 
		margin-left:13px; 
		margin-right:13 px;
	}	
	.navbar>li>a 
	{
		font-size: 20px;
	}							
}
			
@media screen and (max-width:1050px)/* triggers the following elements to change when the page width is enqual to less than 1050 pixels */

{
	.navbar>li
	{ 
	margin-top: 16px;
	margin-left:12px;...