JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<div id="load" class="clickable">Card:<span class="card_left"></span> draw next</div>

CSS

body {
  font-family: Tahoma;
}

#output {
  display: none;
  margin-top: 1rem;
}

/*
.card {
  position: relative;
  min-width: 240px;
  min-height: 200px;
  background-color: #fefefe;
  display: block;
  border-radius: 15px;
  margin: auto;
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
  max-width: max-content;
  -webkit-box-shadow: 1px 7px 13px 3px rgba(0, 0, 0, 0.08);
  box-shadow: 1px 7px 13px 3px rgba(0, 0, 0, 0.08);
  background-color: #f9f9fd;
  -webkit-user-select: none;
  user-select: none;
}
*/

.card .title {
  display: block;
  font-weight: 600;
}

.card .actions ul {
  text-align: left;
}

.shuffle {
  text-align: center;
}

/* responsive flip-card */

.card {
  perspective: 1000px;
}

.card:hover .card__inner,
.card:active .card__inner,
.card:focus .card__inner,
.card.active .card__inner {
  transform: rotateY(180deg);
}

.card,
.card__inner {
  position: relative;
  width: 300px;
  height: 320px;
  border-radius: 15px;
}

.card__inner {
  background-color: #fefefe;
  display: block;
  margin: auto;
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
  max-width: max-content;
  -webkit-box-shadow: 1px 7px 13px 3px rgba(0, 0, 0, 0.08);
  box-shadow: 1px 7px 13px 3px rgba(0, 0, 0, 0.08);
  background-color: #f9f9fd;
  -webkit-user-select: none;
  user-select: none;
}

.card__inner {
  transition: transform .25s ease-in-out;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}

.card__front {
  transform: rotateY(180deg);
}

.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
}

.card,
.card__inner {
  width: 200px;
  height: 220px;
  max-width: 100%;
}

.card__back {
  background-image: linear-gradient(#d2d2d2 0.8px, transparent 0.8px), linear-gradient(90deg, #d2d2d2 0.8px, transparent 0.8px), linear-gradient(#d2d2d2 0.4px, transparent 0.4px),...

JavaScript

//RANDOM CARD DRAWER
var i = 0;

function randomNoRepeats(array) {
  var copy = array.slice(0);
  var copy_length = copy.length;
  $("#load .card_left").html(' ' + copy_length + ' left');
  return function() {
    if (copy.length < 1) {
      copy = array.slice(0);
    }
    if (i < copy_length) {
      var index = Math.floor(Math.random() * copy.length);
      var id = copy[index].id;
      var title = copy[index].title;
      var actions = copy[index].actions;
      copy.splice(index, 1);
      if (!$("#output").length) {
        $("#load").after('<div id="output"></div>');
      }
      $("#output").fadeIn('slow');
      $("#output").html('<div class="card"><div class="card__inner"><div class="card__back"></div><div class="card__front">' +
        '<span class="title">' + title + '</span>' +
        '<span class="number">' + id + '</span>' +
        '<span class="actions">' + (typeof actions !== "undefined" ? actions : '') + '</span></div></div>' +
        '</div></div>');
      i++;
      var cards_left = i;
      $("#load .card_left").html(' ' + cards_left + '/' +
        copy_length);
      setTimeout(function() {
        $("#output .card").addClass("active");
        $(".card").fadeIn('slow');
      }, 300);

      //return title;
    } else {
      $("#load").removeClass();
      $("#output").html('<p class="shuffle">shuffling …</p>');
      $("#output").fadeOut('slow', function() {
        chooser();
        $("#load").addClass("clickable");
        $("#output").fadeIn('slow');
      });
      i = 0;
    }
  };
}

//var chooser = randomNoRepeats(['Foo', 'Bar', 'Gah']);
var chooser = randomNoRepeats([{
    id: '1',
    title: 'Metallica',
    actions: '<ul><li>Perform 1</li><li>Perform 2</li></ul>'
  },
  {
    id: '2',
    title: 'Deftones'
  },
  {
    id: '3',
    title: 'Limp Bizkit'
  },
  {
    id: '4',
    title: 'Korn'
  }
]);

$("#load").on("click", function() {
  if ($(this).hasClass("clickable")) {
    chooser();
  }
});

chooser();