JSFiddle - React, Tailwind, and code Playground

by Laurie

HTML

<link rel="stylesheet" href="http://www.drewgreenwell.com/content/metrojs.css">
<script src="http://www.drewgreenwell.com/scripts/metrojs.js"></script>

<div class="tiles red">
    <div class="live-tile" data-mode="flip" data-initdelay="500">        
        <!-- adding the 'full' class to an 'img' or 'a' tag causes it to fill the entire tile -->
        <div>
            <a class="full" href="#">front</a>
            <span class="tile-title">front title</span>
        </div>
        <div>
            <p>this tile flips vertically. Using the 'data-initdelay' attribute will adjust the time it takes for the inital flip to occur</p>
        </div>
    </div>
    
    <div class="live-tile blue" data-direction="horizontal" data-mode="flip">     
        <div>front
              <span class="tile-title">front title</span>
        </div>
        <div>
            <p>this tile flips horizontally
               <span class="tile-title">back title</span>
            </p>
        </div>
    </div>
</div>

JavaScript

//flip mode simple
//using data attributes
$(".live-tile").liveTile();

//without data-attributes
//$("#tile1").liveTile({ mode:'flip', initDelay: 500 });
//$("#tile2").last().liveTile({ mode:'flip' });