keralawaterauthority/components/widget/PaymentAddKPI.js

import React from 'react'

function PaymentAddKPI() {
    return (
       
            <div className="card ">
                {/* <div className="card-header">
                    <h4 className="card-title">Stats</h4>
                </div> */}
                <div className="card-body d-flex flex-column gap-2">
                    <div>
                        <h3>Your Wallet</h3>
                    </div>
                    <hr />
                    <div>
                        <h1 className='p-0 m-0'>₹0.00</h1>
                        <span className='font-14'>Your Current Balance</span>
                    </div>

                    <hr />

                    <div>
                        <div className='text-dark'>Add money to wallet</div>
                        <span style={{fontSize:'10px'}}>We recommend to recharge your Wallet with <span className='text-success'>₹500.00</span>
                        </span>
                    </div>

                    <div>
                        <div className="py-4 position-relative">
                            <span style={{top:'30px'}} className="align-items-center pl-2 position-absolute pt-2">
                                <span className='px-2'>₹</span>
                            </span>

                            <input type="number" className="form-control hs_borderRadius-4 pl-4" />

                        </div>
                    </div>

                    <div className='pb-1'>
                    <button className='btn bg-primary br-btn'>Proceed</button>
                    </div>

                </div>
            </div>
    
    )
}

export default PaymentAddKPI