<div id="app"></div>
* {
  box-sizing: border-box;
}

body {
  background-color: #EDF1F4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #153D66;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

h2 {
  margin: 0;
}

.form-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.125)
}

.form-header {
  padding: 1.75rem;
  padding-bottom: 0;
}

.form-body {
  padding: 1.75rem;
}

label {
  display: block;
  margin-bottom: 4px;
  width: 100%;
}

input {
  display: block;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 16px;
  box-shadow: none;
  border: 1px solid #A4B6C0;
  width: 100%;
}

input:focus {
  box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset, rgba(102, 175, 233, 0.6) 0px 0px 8px;
  border-color: rgb(102, 175, 233);
  outline: 0px;
}

button {
  -webkit-appearance: none;
  margin: 1.75rem auto 0;
  display: block;
  cursor: pointer;
  padding: 12px 20px;
  background-color: #A6E9DC;
  border: 0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  color: #004C4A;
}
class App extends React.Component {
  render() {
    return (
      <div className="form-container">
        <div className="form-header">
          <h2>State Machine Payment Form</h2>
        </div>

        <div className="form-body">
          <form>
            <div className="form-group">
              <label htmlFor="NameOnCard">Name on card</label>
              <input
                id="NameOnCard"
                className="form-control"
                type="text"
                maxlength="255"
              />
            </div>
            <div className="form-group">
              <label htmlFor="CreditCardNumber">Card number</label>
              <input
                id="CreditCardNumber"
                className="null card-image form-control"
                type="text"
              />
            </div>
            <button
              id="PayButton"
              className="btn btn-block btn-success submit-button"
              type="submit"
            >
              <span className="submit-button-lock" />
              <span className="align-middle">Pay Now</span>
            </button>
          </form>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/xstate@3.3.2/dist/xstate.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.production.min.js