JSFiddle - React, Tailwind, and code Playground

Bootstrap Idea

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<header id="header">

  <!-- Container -->
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="border-top"></div>
      </div>

      <!-- Logo / Mobile Menu -->
      <div class="col-md-3">
        <div id="mobile-navigation">
          
          <a href="#menu" class="menu-trigger"><i class="fa fa-reorder"></i></a>
          
        </div>

        <div id="logo">
          <h1><a href="index.html"><img...

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400, 700);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200, 300, 400, 700);

/* Basic Alginment
================================================== */
#wrapper img {
    height: auto;
    max-width: 100%;
}

.columns.google-map img {
    max-width: none;
}

img, object, video {
    height: auto;
    display:block;
}

img {
    width: auto;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

/* Flexible Embeds */
.embed {
    position: relative;
    padding: 0px;
    padding-bottom: 56.25%; /* 16/9 ratio */
    height: 0;
    overflow: hidden;
}

.embed iframe,
.embed object,
.embed embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.image-left {
    float: left;
    margin: 5px 15px 8px 0;
}

.image-right {
    float:right;
    margin: 5px 0 8px 15px;
}

.image-right,
.image-left {
    padding: 5px;
    border: 1px solid #e0e0e0;
    max-width: 100%;
    border-radius: 3px;
    -webkit-box-shadow:  0px 2px 0px 0px rgba(0, 0, 0, 0.03);
    box-shadow:  0px 2px 0px 0px rgba(0, 0, 0, 0.03);
}

/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {
    color: #505050;
    font-weight: 500;
    font-family: 'cabin', 'open sans', arial, helvetica;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 28px; line-height: 50px; }
h2 { font-size: 24px; line-height: 30px; }
h3 { font-size: 20px; line-height: 34px; }
h4 { font-size: 18px; line-height: 30px; }
h5 { font-size: 16px; line-height: 24px; }
h6 { font-size: 14px; line-height: 21px; }

p { margin: 0 0 15px 0; line-height: 24px;}
p img { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; color: #777;  }

em { font-style: italic; }
strong { font-weight: 600; color: #333; }
small { font-size: 80%; }

hr { border: solid #ddd; border-width: 1px 0 0; clear: both;...

JavaScript

//http://www.csswallet.com/Corp-Creative/
//http://dmartify.com/

$(document).ready(function () {
    $("a.close").removeAttr("href").click(function () {
        $(this).parent().fadeOut(200);
    });
});