JSFiddle - React, Tailwind, and code Playground

HTML

<div id="prices">
    <div id="buy-button">
      Buy Now
    </div>
    <div id="regular-price">
      $500.00
    </div>
    <p class="affirm-as-low-as" data-page-type="payment" data-amount="50000"></p>
</div>

CSS

html {
    font-family:arial;
  }
  #prices {
    padding:10px;
  }
  #buy-button {
    margin:10px 0px;
    width:240px;
    height:20px;
    background:#4A4AF4;
    border-radius:3px;
    text-align:center;
    padding:10px;
    color:#f2f4f5;
  }
  #buy-button:hover {
    cursor:pointer;
    color:#fff;
    background:#00C8E5;
  }
  #regular-price {
    font-size:1.8em;
    font-weight:700;
    margin:10px 0px;
  }
  a,a:active,a:visited {
    color:#6F7A87;
  }
  a:hover {
    color:#23292F;
  }

JavaScript

var _affirm_config = {
    public_api_key: "ZY5CSWJ2TJLAL74I", /* Affirm Public API Key */
    script: "https://cdn1-sandbox.affirm.com/js/v2/affirm.js",
    session_id: "sID"
  };
  (function(l,g,m,e,a,f,b){var d,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[0],k=function(a,b,c){return function(){a[b]._.push([c,arguments])}};c[e]=k(c,e,"set");d=c[e];c[a]={};c[a]._=[];d._=[];c[a][b]=k(c,a,b);a=0;for(b="set add save post open empty reset on off trigger ready setProduct".split(" ");a<b.length;a++)d[b[a]]=k(c,e,b[a]);a=0;for(b=["get","token","url","items"];a<b.length;a++)d[b[a]]=function(){};h.async=!0;h.src=g[f];n.parentNode.insertBefore(h,n);delete g[f];d(g);l[m]=c})(window,_affirm_config,"affirm","checkout","ui","script","ready");
// END AFFIRM.JS EMBED CODE