JSFiddle - React, Tailwind, and code Playground

Participant Badge Populator

HTML

<script src="//cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

JavaScript

function randomDate(start, end) {
	return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
};

function getRandomNumber(start, end) {
	return (Math.floor(Math.random() * end) + start);
}

var badgesArr = [
    {
      "id": "BkzpYebGQ",
      "name": "Comments Master",
      "theme": "Default",
      "type": "gold",
      "image":"badge-14.png",
      "source": "",
      "event_name": "Comment",
      "event_type": "Workflow",
      "description": "Added 1000 inputs / comments to a workflow step",
      "eventId": "",
      "times": 1000,
      "duration": "none"
    },
    {
      "id": "ryezaFlbMQ",
      "name": "Super Commentator",
      "theme": "Default",
      "type": "silver",
      "image":"badge-8.png",
      "source": "",
      "event_name": "Comment",
      "event_type": "Workflow",
      "description": "Added 700 inputs / comments to a workflow step",
      "eventId": "",
      "times": 700,
      "duration": "none"
    },
    {
      "id": "SJ-Matg-GQ",
      "name": "Commentator",
      "theme": "Default",
      "type": "bronze",
      "image":"badge-1.png",
      "source": "",
      "event_name": "Comment",
      "event_type": "Workflow",
      "description": "Added 200 inputs / comments to a workflow step",
      "eventId": "",
      "times": 200,
      "duration": "none"
    },
    {
      "id": "rJfMpKgWMm",
      "name": "Inquisitive",
      "theme": "Default",
      "type": "silver",
      "image":"badge-2.png",
      "source": "",
      "event_name": "Comment",
      "event_type": "Workflow",
      "description": "Ask a well received query on 30 separate days",
      "eventId": "",
      "times": 1,
      "duration": "30d"
    },
    {
      "id": "S1Xf6txWMm",
      "name": "Illuminator",
      "theme": "Default",
      "type": "gold",
      "image":"badge-12.png",
      "source": "",
      "event_name": "Update Asset",
      "event_type": "Asset",
      "description": "Edit or update over 15 assets within 24...