JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>


<input type="text" id="user" value="gokulnk">
<button type="submit" id="fetch">Get SP</button>

<pre id="output"></pre>

JavaScript

(function() {
    document.getElementById('fetch').addEventListener('click', getSP);

    function getSP() {
        const username = document.getElementById('user').value;
        getSteemPower(username).then(result => {
        	const SP = result.toLocaleString();
          document.getElementById('output').innerText = `${SP} SP`
        })
    }

    function getSteemPower(username) {
        return Promise.all([
        new Promise(function(resolve, reject) {
         // Do async job
            steem.api.getAccounts([username],function(err, result) {
                if (err) {
                    reject(err);
                } else {
                    resolve(result);
                }
             })
           }),
        new Promise(function(resolve, reject) {
         // Do async job
            steem.api.getDynamicGlobalProperties(function(err, result) {
                if (err) {
                    reject(err);
                } else {
                    resolve(result);
                }
              })
            })
          ]).then(([user, globals]) => {
            const totalSteem = Number(globals.total_vesting_fund_steem.split(' ')[0]);
            const totalVests = Number(globals.total_vesting_shares.split(' ')[0]);
            const userVests = Number(user[0].vesting_shares.split(' ')[0]);

            return totalSteem * (userVests / totalVests);
        });
    }
})();