JSFiddle - React, Tailwind, and code Playground

by Ajay Barot

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/2.3.1/css/bootstrap.min.css">
<script src="https://github.com/heelhook/chardin.js/blob/master/chardinjs.js"></script>
<link rel="stylesheet" href="https://github.com/heelhook/chardin.js/blob/master/chardinjs.css">
<body>
    <div class="container">
      <div class="jumbotron">
        <h1 data-intro="Project title" data-position="right">Chardin.js</h1>
        <p class="lead">
          Simple overlay instructions for your apps.
        </p>
        <img src="http://s11.postimg.org/5j9wr7n8z/chardin.png" data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." data-position="right" />
        <a href="#" class="btn btn-large primary" data-toggle="chardinjs" data-intro="This button toggles the overlay, you can click it, even when the overlay is visible" data-position="left">See it in action</a>
        <a href="" id="opentour" class="hide" data-toggle="chardinjs">Or open it again</a>
        <div class="credits">
          <p data-intro="Author of this plugin, aka Pablo Fernandez" data-position="right">
            Baked with
            <b>&lt;3</b>
            by
            <a href="https://github.com/heelhook">@heelhook</a>.
          </p>
        </div>
      </div>


        <div class="links">
          <p id="links" data-intro="Links to Github, Twitter, etc." data-position="top">
            <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Check out Chardin.js, simple overlay instructions for apps, https://heelhook.github.com/chardin.js" data-count="none" data-via="pablo2dot0">Tweet</a>
            <a href="https://twitter.com/pablo2dot0" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @pablo2dot0</a>
            <iframe style="display: inline-block;" frameborder="no" scrolling="no" height="30px" width="70px"...

CSS

body {
    background-color: #fff;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), color-stop(25%, #fff), to(#fff));
    background-image: -webkit-linear-gradient(#eee, #fff 25%, #fff);
    background-image: -moz-linear-gradient(top, #eee, #fff 25%, #fff);
    background-image: -ms-linear-gradient(#eee, #fff 25%, #fff);
    background-image: -o-linear-gradient(#eee, #fff 25%, #fff);
    background-image: linear-gradient(#eee, #fff 25%, #fff);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.primary.btn {
    color: #fff;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    background-color: #3072b3; /* Old browsers */
    background-repeat: repeat-x; /* Repeat the gradient */
    background-image: -moz-linear-gradient(top, #599bdc 0%, #3072b3 100%); /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#599bdc), color-stop(100%,#3072b3)); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* Chrome 10+,Safari 5.1+ */
    background-image: -ms-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* IE10+ */
    background-image: -o-linear-gradient(top, #599bdc 0%,#3072b3 100%); /* Opera 11.10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#599bdc', endColorstr='#3072b3',GradientType=0 ); /* IE6-9 */
    background-image: linear-gradient(top, #599bdc 0%,#3072b3 100%); /* W3C */
    border: 1px solid #2967a4;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2);
}
.primary.btn:hover {
    background-position: 0 -15px;
}
.primary.btn:active {
    background-image: none;
    background-color: #3072b3; /* Old browsers */
   ...

CoffeeScript

$ ->
    $('body').chardinJs()

    $('a[data-toggle="chardinjs"]').on 'click', (e) ->
        e.preventDefault()
        if $('.jumbotron img').is(':visible')
            ($('body').data('chardinJs')).toggle()
        else
            $('.jumbotron img').animate height: 250, 600, ->
                ($('body').data('chardinJs')).toggle()

    $('body').on 'chardinJs:stop', ->
        $('a.btn.primary').off('click').text('See more on Github')
            .attr('href', 'https://github.com/heelhook/chardin.js')
        $('a#opentour').css display: 'block'