JSFiddle - React, Tailwind, and code Playground

by ballerine

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>My Accounting Openeing Flow</title>
    <script crossorigin src="https://cdn.ballerine.io/js/1.2.2/ballerine-sdk.umd.js"></script>
  </head>

  <body>
    <div id="kyc-host"></div>
    <script>
      const backIconButton = {
        id: "back-icon-button",
        orderIndex: 10,
        type: "icon-button",
        props: {
          attributes: {
            src: 'https://cdn.ballerine.io/rio/back.svg',
            alt: 'back',
            width: '28px',
            height: '28px',
          },
          style: {
            left: '26px',
            background: 'transparent',
          },
        },
      };

      const backWhiteIconButton = {
        id: "back-white-icon-button",
        orderIndex: 10,
        type: "icon-button",
        props: {
          attributes: {
            src: 'https://cdn.ballerine.io/rio/back-white.svg',
            alt: 'back',
            width: '28px',
            height: '28px',
          },
          style: {
            left: '26px',
            background: 'transparent',
          },
        },
      };

      const ballerineInitConfig = {
        endUserInfo: { id: 'test-id' },
        translations: {
          overrides: {
            en: {
              "document-options": {
                "ife_card-title": "IFE card",
                "ine_card-title": "INE card",
              },
            }
          },
        },
        uiConfig: {
          general: {
            colors: {
              primary: "#000",
            }
          },
          components: {
            button: {
              "border-radius": "41px",
            },
            layout: {
              background: "#fff",
            },
            title: {
              "font-size": "20px",
              "text-align": "left",
              color: "#001B39",
              padding: '11px 0px 18px 26px',
            },
            paragraph: {
              "text-align": "left",
             ...