Beranda.js

import React, { Component } from 'react';
import { Typography } from '@material-ui/core';

class Beranda extends Component {
    render() {
        return (
            <div style={{ flex: 1 }}>
                <div style={{ height: 150, width: '100%', padding: 20 }} className={"main-color"}>
                    <Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography>
                    <Typography style={{ fontSize: '12px', color: 'white', marginTop: 50 }}>Task Yang Harus Dikerjakan</Typography>
                </div>
                <div style={{ flex: 1, padding: 20, width: '100%' }}>
                    <div style={{ display: 'flex' }}>
                        <Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Budget - 2021 (0/7)</Typography>
                        <Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Laporan Bulanan - Oct 2020 (1/7)</Typography>
                        <Typography style={{ color: '#51c6ea', fontSize: '11px', textDecorationLine: 'underline', marginRight: 48 }}>Rolling Outlook - Oct 2020 (0/5)</Typography>
                        <Typography style={{ color: '#7e8085', fontSize: '11px', textDecorationLine: 'underline' }}>Lainnya</Typography>
                    </div>
                </div>
                <div style={{ flex: 1, padding: 20, width: '100%' }}>
                    <div style={{ display: 'flex' }}>
                        <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4', marginRight: 25, padding: 16 }}>
                            <Typography style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>BALANCE SHEET</Typography>

                        </div>
                        <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4' }}>

                        </div>
                    </div>
                    <div style={{ display: 'flex', marginTop: 25 }}>
                        <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4', marginRight: 25 }}>

                        </div>
                        <div style={{ height: 283, width: 398, borderRadius: 6, backgroundColor: '#fff', border: '1px solid #c4c4c4' }}>

                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Beranda;