JSFiddle - React, Tailwind, and code Playground

by mkbharti

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<button onclick="myFunction()">Try it</button>

<div id="accordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <p>1Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Twitter Bootstrap?</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
                <p>2Div</p>
      ...

CSS

.spinner {
    position: absolute;
    right: 45%;
    bottom: 50%;
    z-index: 9999;
}

.shadow {
    z-index: 900
}

.blocker {
    z-index: 1000;
    height: 100%;
    width: 100%;
    background: #000000;
    opacity: 0.3;
    left: 0;
    top: 0;
    position: absolute;
}

JavaScript

function myFunction() {
                $(".spinner").show();
            $('#shadow').addClass('blocker');
    setTimeout(function(){ 
        $(".spinner").hide();
            $('#shadow').removeClass('blocker');
    }, 3000);
}