JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<header>
  <div> <img src="images/Uconnect_header.png" width="480" height="114"> </div>
</header>
<section> 
	<div id="headingTxt"><h5>UCONNECT ACCESS SERVICES</h5></div>
    <p class="descriptionTxt">Services intro copy will go here and need to be dynamically filled according to new and existing schemas. This could be larger or smaller then what is displayed here.</p>
    <hr>

CSS

body{
	margin:0px;
	padding:0px;
	background-color:#CCC;
	width:480px;
	border:1px solid red;
}
section{
	margin:10px;
}
@media only screen and (max-device-width: 480px) {

	#headingTxt{background-color:#009966;}
    .descriptionTxt{color:red;}
}