JSFiddle - React, Tailwind, and code Playground

by vaibhav saxena

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/javascript/semantic.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<div class="column content">
    <h1><i class="icon circular square yellow inverted">JS</i></h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, .</p>
    <div class="ui fade reveal pop" data-content="javascript and jQuery" data-title="JS">
    <img src="images/js.png" alt="js" class="ui circular image visible content" />
    <img src="images/jsreveal.png" alt="js" class="ui circular image hidden content">
    </div>
</div>

JavaScript

$('.content').on('click', function () {

 $('.content').transition({
animation: 'jiggle',
duration: 500,
useFailSafe: true,
allowRepeats: false,
queue : false
        });
 });