JSFiddle - React, Tailwind, and code Playground

by Jeremy Lewis

HTML

<body>

<div id="master">


<!-- HEADER -->
	<header>
	</header>

<!-- NAVIGATION -->
	<nav>

		<ul>
			<li><a href="#">Meet Your Sensei</a></li>
			<li><a href="#">Tour Our Dojo</a></li>
			<li><a href="#">Our Martial Arts Program</a></li>
			<li><a href="#">Our Training Schedule</a></li>
			<li><a href="#">Current Events</a></li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">Contact</a></li>
		</ul>

	</nav>

<!-- SLIDESHOW -->
	<div id="slideshow">

	</div>

<!-- FEATURE BOXES -->
	<div class="contentbox">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>

	<div class="contentbox">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>

	<div class="contentbox">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>

<!-- ARTICLE SECTION...

CSS

/* FIXES SPACING/CENTERING OF NAV MENU */
nav ul { -webkit-padding-start: 0;
		 -moz-padding-start: 0; }

/* ========================================================== */
/* LOW RESOLUTION:  480px wide and below */
/* ========================================================== */
@media only screen and (max-width: 480px) {

p { color: rgb(0,0,0) }

body { background: rgb(244,244,244);}

#master {  background: rgb(255,255,255);
		   width: 95%;
		   margin: 0 auto;
		   border: 1px solid rgb(193,180,152);
		}

header { height: 130px;
		 background: rgb(200,200,200);
		 /* no need to set width because it automatically fills the available
		 	width - it will automatically scale since it is sitting inside the
		 	#master div */
	   }
 
nav { /* no need for width/height as it will scale accordingly using the available
		 95% width set in #master */
	  background: rgb(0,0,0);
	  text-align: center;
	  padding: 10px 5px;  /* spacing on inside of element, top/bot _ left/right */
	  margin-bottom: 10px;   /* spacing on outside of element */
	}

nav li { display: inline; 
		 margin-left: 10px;
		 font-size: 120%;
		 line-height: 150%;
       }

nav li a { color: rgb(255,255,255);
		   text-decoration: none;
		 }

/* CHOSE TO EXCLUDE SLIDESHOW FROM LOW RES DUE TO SPACE / PRACTICALITY */

.contentbox { background: rgb(200,200,200);
			  float: left;
			  border-top: 1px solid rgb(193,180,152);
			  border-bottom: 1px solid rgb(193,180,152);
			  padding: 10px; /* spacing on INSIDE */
			  margin-bottom: 10px; /* spacing on OUTSIDE bottom */
			}
    .contentbox p { font-family: Verdana;
    				font-size: 80%;
    				line-height: 160%;
    			   }

article { width: 95%;
		  margin-left: 10px;
		  margin-bottom: 60px;
		  line-height: 140%;
		 }
	.news { margin-bottom: 20px; }
	.news h2 { font-size: 120%;
			   margin-bottom: 5px;
			 }
	.news h2 a { text-decoration: none; 
				 color: rgb(189,30,44);
				}
	.news p { line-height: 150%;} /* gives spacing between lines of text...