JSFiddle - React, Tailwind, and code Playground

by Ming Huang

HTML

<title>191st Army Band</title>
 in mobile devices-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">



<!-- jQuery library 1.1.2-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--jQuery UI Plugin -->
<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Latest compiled JavaScript for BootStrap---->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- Google Font  -->
<link href='http://fonts.googleapis.com/css?family=Simonetta:400,900italic' rel='stylesheet' type='text/css'>

<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<!-- Link to Javascript.js-->
<script src="JS/website.js"></script>
</head>

<body>
<div data-role="page">

 <div data-role="panel" id="myPanel">
      <h2>Menu</h2>
      <ul data-role="listview">
       <li><a href="index.html" data-icon="home">Home</a></li>
       <li><a href="history.html">History</a></li>
       <li><a href="ensembles.html">Ensembles</a></li>
       <li><a href="staff.tml">Staffs</a></li>
       <li><a href="career.html">Career</a></li>
       <li><a href="contact.html">Contact</a></li>
      </ul>
     </div>
     <div data-role="header">
     <img id="banner" src="pictures/191stBannerCropped.jpg">
      <div data-role="navbar" id="topNav">
       <ul>
        <li><a class="topNavMoved" href="#myPanel" data-icon="bars">Menu</a></li>
        <li><a class="topNavMoved" href="index.html"...

CSS

/***********************************************************************************
General Rules
***********************************************************************************/

header{
background:lightblue;
}

#main_nav{
display:none;
}

#topNav{
	z-index: 2;
}

.topNavMoved{
	width:100%;
}

#alt_nav{
margin:-20px 0 0 0;
}

.dropdown-menu li:nth-child(2n+2){
background:#ddd;
}

#banner{
	width:100%;
	margin:0 auto;
	display:inherit;
}


.snowText{
	color:snow;
	font-family: "Times New Roman", Times, sans-serif;
	text-align: center;
}

#FBdiv{
	display:block;
	margin:0 auto;
	text-align: center;
	position:relative;
	left:10px;
	padding:5px 0;
}

 .fb-page, .fb-page:before, .fb-page:after {
    border: 1px solid #ccc;
	display:block;
	margin:0 auto;
	text-align: center;
}

.armyReserve{
	display:block;
	margin:0 auto;
	width:290px;
	position: relative;
	top: 4px;
	left:-5px;
	height:218px;
	border-radius: 3px;
}

.armyReserve:hover{
	opacity: 0.9;
}



/***********************************************************************************
Rules for Big Screen Devices
***********************************************************************************/
/*---------------------------------General----------------------------------------*/
@media screen and (min-width: 700px) {
    #banner {
    	width:50%;
        height:auto;
        max-height: 100px;
    }
}
/*------------------------------------Home Page---------------------------------*/
 @media screen and (min-width: 500px) {
    #feature_photo{
		min-width:800px;
		position: relative;
  		left: 50%;
  		top: 50%;
  		margin:0 0 0 100px;
	  
	  /*
	  Nope =(
	  margin-left: -25%;
	  margin-top: -25%;
	  */

	  /* 
	  Yep!
	  */
	 transform: translate(-50%);
	 -ms-transform: translate(-50%); /* IE 9 */
   	-webkit-transform: translate(-50%); /* Safari */
	  
	  /*
	  Not even necessary really. 
	  e.g. Height could be left out!
	  */
	  width: 40%;
	  height:...