JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<script src="http://zoli.fanx.vmtinternal.net/bootstrap/js/chardinjs.js"></script>
<link rel="stylesheet" href="http://zoli.fanx.vmtinternal.net/bootstrap/css/chardinjs.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<img src="http://placehold.it/100x100" data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." data-position="right" />
<hr>
<form action="">
    <input type="text" placeholder="serch" data-intro="awesome" data-position="right" />
</form>
<hr>    
<form action="">
    <input type="text" placeholder="serch" data-intro="awesome" data-position="right" />
</form>
<p data-intro="" class="text">I like pie</p>

CSS

.text{
    display:none;
    color:#fff;
}

JavaScript

//call new site inroduction
$('body').on('chardinJs:start', function() {
    //alert('pie');
    $('.text').show();
});
$('body').on('chardinJs:stop', function() {
    //alert('pie');
    $('.text').hide();
});

$('body').chardinJs('start');