JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="site">
<div class="header_out" id="header_out">
			<header class="group">
				<a href="/" class="logo">
					<img src="//www.imarc.net/img/site/logo_imarc.png" alt="iMarc" />
				</a>
				<span class="location">Boston &nbsp; | &nbsp; Silicon Valley</span>
				<nav class="nav_header">
					<button>
						Menu
					</button>
					<ul>
						<li class="">
							<a href="/work">Our Work</a>
						</li>
						<li class="">
							<a href="/services">Services</a>
						</li>
						<li class="">
							<a href="/about">About</a>
						</li>
						<li class="active">
							<a href="/blog">Blog</a>
						</li>
						<li class="">
							<a href="/contact">Contact</a>
						</li>
					</ul>
				</nav>
			</header>
		</div>

<div class="hero">
	<div class="wrapper hero_inner">
		<h1>
			<a href="/blog">Blog</a>
		</h1>
	</div>
</div>

<div class="torso group">
	<div class="wrapper">
		<div class="main">
			
			
							<article class="group">
					<h1>
                        <input class="inline"  type="text" value="Create Toggle Filters in PHP" />
					</h1>

					<div class="meta">
						<p>
							Posted

															by <a href="/about/kerri_gertz">Kerri
 Gertz</a>
							
                            on <input class="inline really" type="text" value="December 4, 2013" />.
														</p>
					</div>

                    <div class="inline wysiwyg" contenteditable="true">
					<p>
						<p>During the buildout of a new site, I came across an issue when trying to create filters for several pages. The filters were designed to be additive and look and act like toggles by being able to select and unselect each filter. Without wanting to bring Javascript into the mix, I asked Jeff for help on how to achieve this functionality using only PHP. After thinking through the different possibilities on how to do this, we came up with a solution of using a form and HTML buttons.</p>
<p>For each filter I created both a hidden input and a button:...

CSS

/* 
	iMarc, LLC

	base
	layout
	forms
	messaging
	page specific
	media queries
	admin
	font-face

	DEVELOPER NOTES - PLEASE READ

	* Find fluid percentages by using target / context = %.
	  1200px is our context.
	
	* When adding section specific styles, please place them
	  in the order of the site nav.


/*
 * Include Fjord. Like a man.
 */
@import url(http://fonts.googleapis.com/css?family=Fjord+One);

/* ------------------------------------------------------------ */
/* base
/* ------------------------------------------------------------ */

* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased; /* fix issues with transforms */
}

::selection {
	background: #0394CD;
	color: #FFF;
}
::-moz-selection {
	background: #0394CD; 
	color: #FFF;
}


.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    *zoom: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}

figure {
	margin: 0;
}
html {
    font-size: 100%;
	-webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background-color: #282828;
 }
body {
	background-color: #FFF;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	text-align: center;
}
h1, h2, h3, h4, h5, h6 {
	color: #F2006D;
	font-family: 'Fjord One', Georgia, serif;
	font-weight: normal;
	line-height: 1.3;
	margin: 0 0 1em;
}
h1 {
	font-size: 28px;
}
h2 {
	font-size: 24px;
}
h3 {
	font-size: 18px;
}
h4 {
	font-size: 15px;
}
p,
ul,
ol,
img {
	margin: 0 0 2em;
}
blockquote {
	margin: 1em 40px 2em 40px;
}
ol {
	margin-left: 22px;
}
a {
	color: #0096D2;
	text-decoration: none;
}
a:hover,
a:focus {
	color: #F2006D;
}
img {
	border: 0;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}
img,
iframe,
embed {
	max-width: 100%;
}
.button a,
button {
	background: #0394CD;
	background:...