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="ui cards">
  <div class="green card">
    <div class="image">
      <img src="img/1.jpg">
    </div>
    <div class="content">
      <a class="header">Header</a>
      <div class="meta">
        <div class="ui small star rating"></div>
      </div>
      <div class="description">Description</div>
    </div>
  </div>
  
  <div class="green card">
    <div class="image">
      <img src="img/2.jpg">
    </div>
    <div class="content">
      <a class="header">Header</a>
      <div class="meta">
        <div class="ui small star rating"></div>
      </div>
      <div class="description">Description</div>
    </div>
  </div>
  
  <div class="green card">
    <div class="image">
      <img src="img/3.jpg">
    </div>
    <div class="content">
      <a class="header">Header</a>
      <div class="meta">
        <div class="ui small star rating"></div>
      </div>
      <div class="description">Description</div>
    </div>
  </div>
</div>

JavaScript

// $(document)
//.ready(function() {
//  $('.card').click(function(){
//     $(this).transition('fade')
//    .transition('fade', function() {
//      console.log('finished');
//  })   
//  })   
//  });
  
  
  $(document)
.ready(function() {
  $('.card').click(function(){
     $(this).transition('pulse')
    .transition('fade', function() {
      console.log('finished');
  }) 
  
  }) 
  
  });