JSFiddle - React, Tailwind, and code Playground

by stedman

HTML

<div class="container">
  <label>GP URL to PCI</label>
  <div class="section">
    <label>Raw URL</label>
    <div id="gp-to-pci"></div>
    <br />
    <div id="gp-to-pci-char-length"></div>
  </div>
  <label>PCI to GP URL</label>
  <div class="section">
    <label>Raw URL</label>
    <div id="pci-to-gp"></div>
    <br />
    <div id="pci-to-gp-char-length"></div>
  </div>
  <label>Base64 value decoded</label>
  <pre id="decoded"></pre>
</div>

CSS

.container {
  margin-bottom: 4em;
  word-break: break-all;
}

label {
  font-weight: bold;
  padding: 10px 0;
  display: block;
}

.section {
  padding: 20px 30px;
}

JavaScript

const claims = [
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56},
  {"claimId": 948740, "amount": 1234.56}
];
const data = {
  "jwt": "eyJhbGciOiJIUzI1NiJ9.eyJjbG0iOiJkbFlOdWNaTkkzazIrT2RhMVNCOEtZQjNEMEJQcTFwOTdobkdQcUN0cSt4UzgyNm96SFhuK2JtOWhOZ1Z6UE9ZTEttUmVoT2tid0V1T1dicUFpWjR6UHhYWDduSHZ6VElGOUc4QmxZZ21GQ1dSMXlIVU1OMHlnQ2duQjRUSU9UOG9hM1ROaEUwQ2dVWnFLbEtXcXVtdjNOaGZDaVU4NktvUFFuMlcwbzZ6UTJKeGxjOUVJb3VoNzVTQ2ZnaVdoREVzMXVFbmpYYmVaQm9UMHpKL3dPR0JLc2FYTUZqRGpwUTU4QXJnTU50Rkt1aFRQSmFRaDdVRWw3a29Rd1RodzhkL3U1M2hLZ3VqSHM1MGdmNkFReDYvb2NDNXZGL0haTWJGcUFvYVhEdGM5SCt6dGF0Snk0b2hxNnA0R3VvbXY3UEpienhCd1BOWk51ekhJMERCUktRaVl4TlVaTXBjOFRhQTZSZElDbUhJVW5PdkE3RSIsImF1eCI6IkFRSURBSGdlNUlYZ1haaDcvY3B6ZHlndnIzTFozdlZnakVkazFneXJzUHg1QWVTQzBBRWtOOXE4cmZjby9hbjUwYk1zZHkzQ0FBQUFmakI4QmdrcWhraUc5dzBCQndhZ2J6QnRBZ0VBTUdnR0NTcUdTSWIzRFFFSEFUQWVCZ2xnaGtnQlpRTUVBUzR3RVFRTTJESTVBc0UxNzZEaVJ3STNBZ0VRZ0R0VU8vRzZkNDdEcGU2c21EMlJXaWJ6VkI3d2NpNDlCTjRubGVsc2lWOFc3NHZuUURMMHNYOFdsK29QRUFZZW44UWRiMFo0c0RJb1RzbHkxUT09IiwiaXNzIjoiR3Vlc3RQYXkiLCJpYXQiOjE2MDQ2MTMwOTcsImV4cCI6MTYwNDYxMzM5NywianRpIjoiMTliOTA2MGUtNGI1Yi00NTBlLTg1NzctZTUwYjcxOGY1MWMzIn0.yprCq8JJe1C78QfRy0yyrntX5Si3M7uwE2Co3hgiHV4",
  "patientId": 467810,
  "totalPaid": `${claims.reduce((total, val)=>total + val.amount, 0).toFixed(2)}`,
 ...