JSFiddle - React, Tailwind, and code Playground

by newsong80

HTML

<body>

<div class="wrapper">

<header class="header"><div class="logo"><img src="images/LOGO.png" width="271" height="66" alt=""/></div>
  <div id="tagline">Cutting-Edge Technology Services &amp; Support</div>
</header>
<nav>

<!-- Start css3menu.com BODY section -->
<input type="checkbox" id="css3menu-switcher" class="c3m-switch-input" />
<ul id="css3menu1" class="topmenu">
	<li class="switch"><label onclick="" for="css3menu-switcher"></label></li>
	<li class="topmenu"><a href="index.html" title="Home" style="width:82px;height:22px;line-height:22px;">Home</a></li>
	<li class="topmenu"><a href="experience.html" title="Our Experience" style="width:110px;height:22px;line-height:22px;">Our Experience</a></li>
	<li class="topmenu"><a href="#" style="width:116px;height:22px;line-height:22px;"><span>SPRM Technology</span></a>
	<ul>
		<li><a href="design.html">Design</a></li>
		<li><a href="analysis.html">Analysis</a></li>
		<li><a href="technology.html">Technology</a></li>
		<li><a href="statistics.html">Statistics</a></li>
		<li><a href="failure_investigations.html">Failure Investigations</a></li>
		<li><a href="qualifications.html">Qualifications</a></li>
		<li><a href="previous_designs.html">Previous Designs</a></li>
		<li><a href="data_comprehension.html">Data Comprehension</a></li>
	</ul></li>
	<li class="topmenu"><a href="air_bag.html" title="Air Bag Technology" style="width:90px;height:22px;line-height:22px;">Air Bags</a></li>
	<li class="topmenu"><a href="stat_process_control.html" title="Statistical Process Control" style="height:22px;line-height:22px;">Statistical Process Control</a></li>
	<li class="topmenu"><a href="#" style="width:94px;height:22px;line-height:22px;">FORTRAN</a></li>
	</ul>
<!-- End css3menu.com BODY section -->

</nav>
<div class="page-title">Our Experience</div>


<section><p>A technology services company supporting the solid rocket motor industry, airbag igniters, as well as Statistical Process Control support and training for...

CSS

@charset "utf-8";
/* CSS Document */
* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 62.5%;
	color: black;
	background-color:#BCBCBC;
	
	}
.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	max-width: 1000px;
	position: relative;
	margin: 0px auto 0px auto;
	background: #FFFFFF;
	overflow:hidden;
}
header {
	width: 100%;
	height: 70px;
	background-color: #fff;
	padding-left: 5px;
}
div .logo {
	width: 272px;
	margin-top: 10px;
	float: left;
}
#tagline {
	float: left;
	width: 50%;
	font-size: 1.7em;
	font-weight: bold;
	padding: 16px 0px 0px 30px;
}
nav {
	width: 100%;
	height: 72px;
	background-color: #E1E1E1;
	text-align: center;
	
}
.index-photo {
	width: 100%;
	height: 350px;
	background: url(../images/business-people.jpg) no-repeat;
	background-size: cover;
	
}
.page-title{
	background-color: #F7931E;
	font-size: 1.8em;
	font-style: italic;
	font-weight: bold;
	color: #fff;
	padding: 8px 0px 8px 20px;
	margin: 20px 0px 0px 0px;
	background-image: -webkit-linear-gradient(358deg,rgba(179,5,8,1.00) 0%,rgba(251,68,18,1.00) 64.77%);
	background-image: -moz-linear-gradient(358deg,rgba(179,5,8,1.00) 0%,rgba(251,68,18,1.00) 64.77%);
	background-image: -o-linear-gradient(358deg,rgba(179,5,8,1.00) 0%,rgba(251,68,18,1.00) 64.77%);
	background-image: linear-gradient(92deg,rgba(179,5,8,1.00) 0%,rgba(251,68,18,1.00) 64.77%);
}
p{
padding: 1em;
}

section {
	 width: calc(75% - 40px);
	float: left;
	background-color: #999999;
	font-size: 1.5em;
	flex: 1 0 auto;
}
.sidebar{
	width: calc(25% - 40px);
	display: block;
	background-color: #F9E903;
	height: auto;
	float: right;
	
}
footer {
	clear: both;
	background-color: black;
	font-size: 1.1em;
	color: white;
	padding: 1em;
}