JSFiddle - React, Tailwind, and code Playground

by makingthings

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" contetn="IE=edge,chrome=1">
    <title>talk talk</title>
    <meta name="description" content="contetn">
    <meta name="viewport" content="width=device-width">
    <link href="css/global.css" rel="stylesheet">
    <script src="js/modernizr-2.5.3.min.js"></script>
  </head>
  <body><!--[if lt IE 7]>
    <p class="chromeframe">Your browser is <em>Ancient!</em> </p><a href="http://browsehappy.com/">Upgrade to a different broweser </a><![endif]-->
    <section>
      <div class="house"><a href="#">
          <h1 aria-hidden="true" data-icon="&#x25ce;">Guest Bedroom <span>1150² x 350</span></h1>
          <h2><span>Family & Guests</span><span>feel perfectly at home</span></h2><img src="http://lorempixel.com/400/200/sports"></a></div>
    </section>
  </body>
</html>

CSS

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 6, ../scss/global.scss */
html {
  background: transparent url(../images/grid-24.png) repeat 0 -6px; }

@font-face {
  font-family: 'talktalk';
  src: url("fonts/talktalk.eot");
  src: url("fonts/talktalk.eot?#iefix") format("embedded-opentype"), url("fonts/talktalk.svg#talktalk") format("svg"), url("fonts/talktalk.woff") format("woff"), url("fonts/talktalk.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

/* Use the following CSS code if you want to use data attributes for inserting your icons */
/* line 13, ../scss/_fonts.scss */
[data-icon]:after {
  font-family: 'talktalk';
  content: attr(data-icon);
  speak: none;
  float: right; }

/* line 1, ../scss/_universal.scss */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  background-repeat: no-repeat;
  position: relative;
  vertical-align: midle;
  margin: 0;
  padding: 0; }

/* line 6, ../scss/_normalize.scss */
html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%; }

/* line 16, ../scss/_normalize.scss */
body {
  margin: 0;
  line-height: 1; }

/* line 24, ../scss/_normalize.scss */
form {
  margin: 0; }

/* line 28, ../scss/_normalize.scss */
fieldset {
  margin: 0;
  padding: 0;
  border: 0; }

/* line 41, ../scss/_normalize.scss */
button,
input,
select,
textarea {
  font-size: 100%;
  font-family: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  *vertical-align: middle; }

/* line 53, ../scss/_normalize.scss */
button,
input {
  line-height:...