keralawaterauthority/components/widget/PaymentKPI.js

import React from 'react'

function PaymentKPI() {
    return (
        <div className="col-xxl-12 col-xl-6 col-lg-12">
            <div id="user-activity" className="card" data-aos="fade-up">
                <div className="card-header">
                    <h4 className="card-title">Amount To Be Paid</h4>
                </div>

                <div className="card-body">
                    
                    <div className='d-flex justify-content-between '>
                        {/* <div className='text-dark'>Amount To Be Paid</div> */}
                        <div className='d-flex justify-content-center align-items-center'><div className='pb-0 text-danger' style={{fontWeight:'900',fontSize:'1.3rem'}}>₹14000</div></div>
                        <div className='d-flex justify-content-end '>
                        <button className='btn bg-primary br-btn'>Pay Now</button>
                    </div>
                    </div>
                    {/* <div className='d-flex justify-content-end pt-2 '>
                        <button className='btn bg-primary br-btn'>Pay Now</button>
                    </div> */}
                </div>
            </div>
        </div>
    )
}

export default PaymentKPI