JSFiddle - React, Tailwind, and code Playground

by SASSACB

HTML

<link rel='stylesheet' href='https://code.getmdl.io/1.1.3/material.blue-light_blue.min.css' />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script defer src='https://code.getmdl.io/1.1.1/material.min.js'></script>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<DIV id='${"ReleaseURL"}' style="width: 800px;height:80%;border: none;box-shadow: 0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2); margin:auto;" class="mdl-dialog--fullwidth">
<div class="mdl-dialog__actions"> <span class="btn-sm btn-warning"><i class="fas fa-angle-right"></i><button type="button" class="btn-sm btn-warning">Close</button></span></div>
  <div style="margin:auto;width: 200px; height: 50px; border: 1px rgba(89, 89, 89, 0.28) solid; background: rgb(255,255,255); color: rgb(25,25,25); font-size: 18px; font-weight: inherit; font-family: inherit; font-style: inherit; text-decoration: inherit; text-align: center; line-height: 1.8em;-moz-box-shadow: 2px 2px 2px 0px rgb(128,128,128); -webkit-box-shadow: 2px 2px 2px 0px rgb(128,128,128); box-shadow: 2px 2px 2px 0px rgb(128,128,128);">
    <h5>Novo registo</h5>
  </div> <body>
    <div class="container-fluid" style="text-align:center;">

      <form>

        <p>
          <input type="text" size="5" placeholder="Valor Total" onfocus="this.value=''" id="valor" onchange="calc()" />
          <input type="text" size="1" placeholder="IVA" onfocus="this.value=''" id="iva" onchange="calc()" />
          <input type="text" size="6" placeholder=" Desconto" onfocus="this.value=''" id="desconto" onchange="calc()" />
          <input type="text" size="8" placeholder="Valor a Pagar" id="sum" readonly="readonly" />€</p>
        <p>

          <span class="btn-sm btn-primary"><i class="fas fa-angle-right"></i> <input type="button" value="Calcular" onclick="calc()"/></span>

          <span class="btn-sm btn-warning"><i...

CSS

.modal {
   position: absolute;
   top: 10px;
   right: 100px;
   bottom: 0;
   left: 0;
   z-index: 10040;
   overflow: auto;
   overflow-y: auto;
}