JSFiddle - React, Tailwind, and code Playground

by andresilich

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

<div class="wrapper">
    <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <a href="#" class="overlay">
            Click to hide
        </a>
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>

      <!-- Example row of columns -->
      <div class="row">
        <div class="span4">
          <h2>Heading</h2>
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
        <div class="span4">
          <h2>Heading</h2>
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
         ...

CSS

html, body {
    height: 100%;
}

.wrapper > .container {
    padding-top: 60px;
}

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -40px;
}

footer {
    height: 40px;
}

/* media queries to support the bootstrap responsive stylesheet */

@media (max-width: 979px) {
    .wrapper > .container {
        padding-top:0;
    }

   .wrapper {
        height:auto;
        margin:auto;
        min-height: 0;
   }
}

/* for demo purposes */

.hero-unit {
    position:relative;
}

a.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    text-align:center;
    top:0; right:0; bottom:0; left:0;
    display:block;
    z-index:999;
    border-radius:6px;
    text-decoration:none;
    font-weight:bold;
    font-size:3em;
}

a.overlay:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

a.overlay:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

footer p {
    line-height: 40px;
    margin: 0;
}

footer {
    background-color: #00FFFF;
    text-align: center;
}

JavaScript

$('a.overlay').click(function() {
    $(this).parent().fadeOut('fast');
});