JSFiddle - React, Tailwind, and code Playground

by Tsuneo Yoshioka

HTML

<script src="https://deck-of-cards.js.org/dist/deck.min.js"></script>
<link rel="stylesheet" href="https://deck-of-cards.js.org/example.css">

<div id="container"></div>

JavaScript

var $container = document.getElementById('container')

// create Deck
var deck = Deck()

// add to DOM
deck.mount($container)

deck.cards.forEach(function (card, i) {
    card.setSide('front')
	
    // explode
    card.animateTo({
        delay: 1000 + i * 2, // wait 1 second + i * 2 ms
        duration: 500,
		ease: 'quartOut',
        
        x: Math.random() * window.innerWidth - window.innerWidth / 2,
        y: Math.random() * window.innerHeight - window.innerHeight / 2
    })
});
console.log(window.document.href);