JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/examples/blog/blog.css">
<div class="blog-masthead">
    <div class="container">
        <nav class="blog-nav"> <a class="blog-nav-item active" href="#">Home</a>
 <a class="blog-nav-item" href="#">New features</a>
 <a class="blog-nav-item" href="#">Press</a>
 <a class="blog-nav-item" href="#">New hires</a>
 <a class="blog-nav-item" href="#">About</a>

        </nav>
    </div>
</div>
<div class="container">
    <div class="blog-header">
         <h1 class="blog-title">The Bootstrap Blog</h1>

        <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
    </div>
    <div class="row">
        <div class="col-sm-8 blog-main">
            <div class="blog-post">
                 <h2 class="blog-post-title">Sample blog post</h2>

                <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a>

                </p>
                <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
                <hr>
                <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
                <blockquote>
                    <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </blockquote>
                <p>Etiam porta...

CSS

.formbox-active {
    z-index: 1000;
    position: relative;
}
.formbox-overlay {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: black;
    opacity: 0.5;
}

JavaScript

function highlightForm() {
    var form = $('.formbox'),
        formOverlay = $('<div class="formbox-overlay"></div>'),
        formStyle = form.attr('style');

    form.on('focusin click', function (e) {
        e.stopPropagation();
        form.addClass('formbox-active');
        formOverlay.appendTo('body').fadeIn();
    });

    $('html').click(function () {
        formOverlay.fadeOut('400', function () {
            formOverlay.remove();
            form.removeAttr('style').attr('style', formStyle).removeClass('formbox-active');
        });
    });
}

highlightForm();