JSFiddle - React, Tailwind, and code Playground

by Yair Even Or

HTML

<script src="https://raw.githubusercontent.com/yairEO/react-number-input/master/NumberInput.js"></script>
<script src="https://rawcdn.githack.com/yairEO/react-number-input/bc727cf9131b53d9d3dbe1639e174c5414e32030/NumberInput.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>React</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
  <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
</head>
<body>
 
  <div id="root">
    
  </div>
</body>
</html>

CSS

#root{
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  font: 24px Arial;
}

input{
  font:inherit;
  padding: .5em;
}

Babel + JSX

////////////////////////////////////////////////
// Usage example:

ReactDOM.render(
  <NumberInput localeOptions={{
    maximumFractionDigits:2,
    currency:"USD",
    style:"currency",
    currencyDisplay:"symbol"
    }}
  />,
  root
);