JSFiddle - React, Tailwind, and code Playground

by verbatim

HTML

<div id="contact-us">
	<div id="container">

		<h1>Contact Us</h1>

		<p>Lorem ipsum dolor sit amet possimus facer. Seacula quo mazim clari praesentium legunt exercitationem. Ultrices demonstraverunt rerum recusandae luptatum natoque legunt. Hic harum blandit litora commodi ullam aenean. Illo processus habitasse quasi harum habent cubilia. Eiusmod aspernatur dis dolorem mollitia purus deserunt. Tempore officia commodi commodi odit quaerat atque. Eligendi minus morbi legere blanditiis mirum humanitatis. Occaecati clari senectus saepius alias nonummy gravida. Delectus fusce tempora facilisis ultrices lacinia legere. Minima culpa id praesentium pharetra magna auctor. Dolorem incidunt quo ridiculus fuga vel felis.</p>
		<p>Commodi magnam anteposuerit, mollit potenti consectetuer tation inceptos odit interdum. Orci labore sem hendrerit deserunt laoreet maecenas eleifend blanditiis rerum! Quarta itaque tristique rhoncus consequatur integer labore lius placerat diam. Mazim illum sagittis fiant interdum nulla quidem fringilla esse voluptatum.</p>

		<section>

			<h3>Markup: DIV</h3>

			<section>
			
				<div class="cf contact_list" id="contact_DIV">

					<div class="cf contact_info">
						<div class="dt">Write:</div>
						<div class="dd">
							1404 Main Street
							<br />Anytown, NY 11111							
						</div>
					</div>
					<div class="cf contact_info">
						<div class="dt">Call:</div>
						<div class="dd">
							800.555.5555
							<br />or in Anytown, 123.555.5555
						</div>
					</div>
					<div class="cf contact_info">
						<div class="dt">Fax:</div>
						<div class="dd">123.555.5550</div>
					</div>
					<div class="cf contact_info">
						<div class="dt">Email:</div>
						<div class="dd"><a href="mailto:[email protected]">[email protected]</a></div>
					</div>
					<div class="cf contact_info print">
						<div class="dt">Web:</div>
						<div class="dd">www.mysite.com</div>
					</div>

				</div>

			</section>
			
			<section>

				<h3>Markup:...

CSS

/* http://nicolasgallagher.com/micro-clearfix-hack/ */
		.cf:before,.cf:after{content:" ";display:table;} .cf:after {clear:both;} .cf {*zoom:1;}

		.contact_list .dl, .contact_list .dt, .contact_list .dd { padding:0px; margin:0px; }
		.contact_list .dt, .contact_list .dd { margin-bottom:5px; }
		.contact_list .dl { margin:20px auto; font-family:arial; max-width:330px; }
		.contact_list .dt { font-weight:bold; float:left; width:75px; }
		.contact_list .dd { width:250px; float:left; }

		.contact_list dl, .contact_list dt, .contact_list dd { padding:0px; margin:0px; }
		.contact_list dt, .contact_list dd { margin-bottom:5px; }
		.contact_list dl { margin:20px auto; font-family:arial; max-width:330px; }
		.contact_list dt { font-weight:bold; float:left; width:75px; }
		.contact_list dd { width:250px; float:left; }

		.contact_list {  margin:20px auto; font-family:arial; max-width:330px;  }
		.contact_list p { margin:0;padding:0; }
		
		body { font-size:16px; font-family:arial; }
	
		#container { max-width:700px; margin:0 auto; }