JSFiddle - React, Tailwind, and code Playground

by Hassen Charef

HTML

<p>Type a number: <input type="text" id="f" size="4"></p>

<p>Type a different number: <input type="text" id="s" size="4"></p>

<button id="b" class="myButton">Get the Larger</button>

<p>The larger of the two numbers is: 
<span id="write"></span></p>

CSS

input[type=text] {
  font-family: 'Consolas', monospace;
  font-size: 1.1em;
  padding: .03em;
  text-align: right;
}

/* insane button CSS from http://www.bestcssbuttongenerator.com/ */ 
.myButton {
	-moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
	-webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
	box-shadow: 0px 1px 0px 0px #f0f7fa;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
	background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
	background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
	background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
	background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
	background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);
	background-color:#33bdef;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px -1px 0px #5b6178;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
	background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
	background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
	background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
	background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
	background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);
	background-color:#019ad2;
}
.myButton:active {
	position:relative;
	top:1px;
}

JavaScript

// get the button and make it respond to a click
var theButton = document.getElementById("b");
theButton.onclick = feedTheButton;

let tr = {
  "n_queried_participations": 360,
  "n_participations_with_altered_status": 13,
  "n_participations_refunded": 72,
  "details": [{
    "participation_reference": "2C9KZ6eYT0",
    "participation_status": "BANK_ERROR",
    "errors": [],
    "smoeny_status": "SUCCESS",
    "smoney_warranty_result": true,
    "course_of_action": "Refund payment on Smoney's side"
  }, {
    "participation_reference": "cyDDoSJFNu",
    "participation_status": "BANK_ERROR",
    "errors": [],
    "smoeny_status": "SUCCESS",
    "smoney_warranty_result": true,
    "course_of_action": "Refund payment on Smoney's side"
  }, {
    "participation_reference": "NADTZkYlac",
    "participation_status": "NOT_PAYED",
    "errors": [],
    "smoeny_status": "ERROR",
    "smoney_warranty_result": null,
    "course_of_action": "Change participation status to BANK_ERROR"
  }, {
    "participation_reference": "7vBtikMPLu",
    "participation_status": "BANK_ERROR",
    "errors": [],
    "smoeny_status": "SUCCESS",
    "smoney_warranty_result": true,
    "course_of_action": "Refund payment on Smoney's side"
  }, {
    "participation_reference": "lciAej5gqr",
    "participation_status": "BANK_ERROR",
    "errors": [],
    "smoeny_status": "SUCCESS",
    "smoney_warranty_result": true,
    "course_of_action": "Refund payment on Smoney's side"
  }, {
    "participation_reference": "vWfjpwyShu",
    "participation_status": "BANK_ERROR",
    "errors": [],
    "smoeny_status": "SUCCESS",
    "smoney_warranty_result": true,
    "course_of_action": "Refund payment on Smoney's side"
  }, {
    "participation_reference": "Ov7hEhWsyh",
    "participation_status": "BANK_ERROR",
    "errors": [],
    "smoeny_status": "SUCCESS",
    "smoney_warranty_result": true,
    "course_of_action": "Refund payment on Smoney's side"
  }, {
    "participation_reference": "kqNquyucoA",
   ...