JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div id="footer">
<div id="footer-inner">

	<div id="footer-top">

    	<div id="footer-left">
            <h2>Contact Us</h2>
            <strong>Tel: </strong><?php echo $main_phone_number; ?><br />
            <strong>Fax: </strong><?php echo $main_fax_number; ?><br />
            <strong>Email: </strong><?php echo $company_emailaddress_sales; ?><br /><br />
            <strong>Address:</strong><br />
            <?php echo $main_address1; ?><br />
            <?php echo $main_town; ?><br />
            <?php echo $main_county.' '.$main_postcode; ?><br /><br />
            
		</div>
        
        <div id="footer-middle">
        <a name="enquirysent"></a>
            <h2>Quick Enquiry</h2>
            <div id="enquiryForm">
                <form action="#enquirysent" method="post">
				<input name="post_enquiry" type="hidden" value="1"/>
				<div class="enquiryField">
				<label for="enquiryname">Name:</label>
				<input type="text" name="name" id="name" />
				</div>
				<div class="enquiryField">
				<label for="enquirytel">Tel:</label>
				<input type="tel" name="telephone" id="telephone" />
				</div>
				<div class="enquiryField">
				<label for="email">Email:</label>
				<input type="email" name="email" id="email"/>
				</div>
				<div class="enquiryField">
				<label for="message">Message:</label>
				<textarea name="message" id="message" cols="20" rows="10"></textarea>
				</div>
				<div class="enquiryField">
				<label for="sendEnquiry"></label>
				<input type="submit" name="sendenquiry" id="sendenquiry" value="Send Enquiry" />
				</div>
				</form>
				<div class="clearBoth">&nbsp;</div>
			</div>
        </div>
        
        <div id="footer-right">
            <h2>Partners</h2>
            <img src="../images/image1.jpg" width="123" height="50" /><img src="../images/image2.jpg" width="122" height="78" style="margin-left:15px;" />
        </div>
        
	</div> <!-- footer-top -->
    
    <div id="footer-bottom">
    &copy; Copyright. All...

CSS

#footer-top {
    width:100%;
    padding-top:10px;
    border-bottom:2px #000000 solid;
    display:block;
}
#footer-left {
	width: 290px;
	display:inline-block;
	padding: 5px 15px;
	border-right:1px #000000 solid;
    vertical-align:top;
}
#footer-middle {
	width: 294px; /* Account for margins + border values */
	display:inline-block;
	padding: 5px 15px;
	margin: 0px 5px 5px 5px;
	border-right:1px #000000 solid;
    vertical-align:top;
}
#footer-right {
	width: 270px;
	padding: 5px 15px;
	display:inline-block;
    vertical-align:top;
}
#footer-bottom {
	padding: 0 15px;
}

/* for 980px or less */
@media screen and (max-width: 980px) {
	#footer-left {
		width: 41%;
		padding: 1% 4%;
	}
	#footer-middle {
		width: 41%;
		padding: 1% 4%;
		margin: 0px 0px 5px 5px;
	}
	#footer-right {
		padding: 1% 4%;
		width: auto;
	}
	#footer-bottom {
	    display:block;
		padding: 1% 4%;
	}
}

/* for 700px or less */
@media screen and (max-width: 600px) {
	#footer-left {
		width: auto;
	}
	#footer-middle {
		width: auto;
		margin-left: 0px;
	}
	#footer-right {
		width: auto;
	}
}

/* for 480px or less */
@media screen and (max-width: 480px) {
	#footer-right {
		display: none;
	}
}