Styled Card - Copy this React, Mui Component to your project
Como-ficaria-com-MUI:-<section-id="section-budget"-data-cy="section-budget"-class="sc-3340244f-0-kYtBAk">-<div-class="sc-62f56b22-0-sc-d7a06af5-0-kUrvVP">-<div-display="flex"-width="100%"-class="sc-5373e303-0-kgtnCd">-<div-data-cy="budgetSection-today-balance"-class="sc-7393040a-1-jNvlYN">-<div-color="black.700"-class="sc-62f56b22-0-sc-7393040a-0-hfAXuh-emskfu">-<div-font-size="11px"-font-weight="500"-class="sc-62f56b22-0-dtZLrG">-$-</div>-<span-color="black.700"-class="sc-4cd62a48-0-dckYGk"->Saldo-de-hoje</span->-</div>-<p-color="black.700"-class="sc-851a3ed2-0-dBRcfe">-<span-class="whitespace-nowrap-font-bold">$ 987.624,57</span>-<span>USD</span>-</p>-</div>-<div-class="sc-7393040a-1-bLAYrz">-<div-color="black.700"-class="sc-62f56b22-0-sc-7393040a-0-hfAXuh-emskfu">-<span-color="black.700"-class="sc-4cd62a48-0-dckYGk"->Rendimento-total</span->-</div>-<p-color="black.700"-class="sc-851a3ed2-0-dBRcfe">-<span-class="whitespace-nowrap-font-bold">$ 7.292.460,88</span>-<span>USD</span>-</p>-</div>-<div-class="sc-7393040a-1-bLAYrz">-<div-color="black.700"-class="sc-62f56b22-0-sc-7393040a-0-hfAXuh-emskfu">-Total-desembolsado-</div>-<p-color="black.700"-class="sc-851a3ed2-0-dBRcfe">-<span-class="whitespace-nowrap-font-bold">$ 6.304.836,31</span>-<span>USD</span>-</p>-</div>-</div>-<div-class="sc-4af23993-0-sc-4af23993-1-ceuOXg-hCQkgC">-<div-class="sc-4af23993-0-sc-4af23993-1-fwkzml-fzSDew">-<div-class="sc-4af23993-0-sc-4af23993-1-cgGdYy-hTQXpX">-<p-font-weight="500"-class="sc-851a3ed2-0-kLenlU">Despesas</p>-<div-class="sc-4af23993-0-sc-4af23993-1-JwXHB-iEQqjr">-<div-class="sc-229c3631-0-mJJBD-css-b62m3t-container"-data-cy="select">-<span-id="react-select-2-live-region"-class="css-7pg0cj-a11yText"></span-><span-aria-live="polite"-aria-atomic="false"-aria-relevant="additions-text"-role="log"-class="css-7pg0cj-a11yText"></span>-<div-class="css-17dfiyn-control">-<div-class="css-hlgwow">-<div-class="css-1erarlk-singleValue">All-time</div>-<input-id="react-select-2-input"-tabindex="0"-inputmode="none"-aria-autocomplete="list"-aria-expanded="false"-aria-haspopup="true"-role="combobox"-aria-activedescendant=""-aria-readonly="true"-class="css-1hac4vs-dummyInput"-value=""-/>-</div>-<div-class="css-1wy0on6">-<span-class="css-1hyfx7x"></span>-<div-class="css-16n3y0y-indicatorContainer"-aria-hidden="true"></div>-</div>-</div>-</div>-<button-class="sc-7d5d76a3-3-kaALua"></button-><button-class="sc-7d5d76a3-3-kaALua"></button-><button-class="sc-7d5d76a3-3-kaALua"></button-><button-class="sc-7d5d76a3-3-etLNBF"></button>-</div>-</div>-<div-class="sc-5373e303-0-ketsss">-<div-class="sc-4af23993-0-sc-4af23993-1-sc-7d5d76a3-2-bRepAB-cOgOUw-bZDKVK">-<div-class="sc-4af23993-0-duRjkC">-<p-font-weight="500"-color="black.700"-class="sc-851a3ed2-0-gwhSBq">-Despesas-pagas-</p>-<p-font-weight="500"-class="sc-851a3ed2-0-ddkOhR">1003</p>-</div>-<div-class="sc-4af23993-0-duRjkC">-<p-font-weight="500"-color="black.700"-class="sc-851a3ed2-0-gwhSBq">-Valor-desembolsado-</p>-<p-font-weight="500"-class="sc-851a3ed2-0-ddkOhR">-$ 4.225.219,64-</p>-</div>-</div>-</div>-<div-class="sc-4af23993-0-ihtkpx">-<div-type="pie"-width="100%"-height="300px"-options="[object-Object]"-series="2319913.81,1200325.24,259792.1,148100.34,71980.18,58687.75,161062.79"-style="min-height:-286.7px">-<div-id="apexchartschart-budget-expenses-pie"-class="apexcharts-canvas-apexchartschart-budget-expenses-pie-apexcharts-theme-"-style="width:-503px;-height:-286.7px">-<div-class="apexcharts-tooltip-apexcharts-theme-dark">-<div-class="apexcharts-tooltip-series-group"-style="order:-1">-<span-class="apexcharts-tooltip-marker"-style="background-color:-rgb(163,-248,-156)"></span>-<div-class="apexcharts-tooltip-text"-style="-font-family:-Helvetica,-Arial,-sans-serif;-font-size:-12px;-">-<div-class="apexcharts-tooltip-y-group">-<span-class="apexcharts-tooltip-text-y-label"></span-><span-class="apexcharts-tooltip-text-y-value"></span>-</div>-<div-class="apexcharts-tooltip-goals-group">-<span-class="apexcharts-tooltip-text-goals-label"></span-><span-class="apexcharts-tooltip-text-goals-value"></span>-</div>-<div-class="apexcharts-tooltip-z-group">-<span-class="apexcharts-tooltip-text-z-label"></span-><span-class="apexcharts-tooltip-text-z-value"></span>-</div>-</div>-</div>-<div-class="apexcharts-tooltip-series-group"-style="order:-2">-<span-class="apexcharts-tooltip-marker"-style="background-color:-rgb(255,-191,-95)"></span>-<div-class="apexcharts-tooltip-text"-style="-font-family:-Helvetica,-Arial,-sans-serif;-font-size:-12px;-">-<div-class="apexcharts-tooltip-y-group">-<span-class="apexcharts-tooltip-text-y-label"></span-><span-class="apexcharts-tooltip-text-y-value"></span>-</div>-<div-class="apexcharts-tooltip-goals-group">-<span-class="apexcharts-tooltip-text-goals-label"></span-><span-class="apexcharts-tooltip-text-goals-value"></span>-</div>-<div-class="apexcharts-tooltip-z-group">-<span-class="apexcharts-tooltip-text-z-label"></span-><span-class="apexcharts-tooltip-text-z-value"></span>-</div>-</div>-</div>-<div-class="apexcharts-tooltip-series-group"-style="order:-3">-<span-class="apexcharts-tooltip-marker"-style="background-color:-rgb(143,-199,-255)"></span>-<div-class="apexcharts-tooltip-text"-style="-font-family:-Helvetica,-Arial,-sans-serif;-font-size:-12px;-">-<div-class="apexcharts-tooltip-y-group">-<span-class="apexcharts-tooltip-text-y-label"></span-><span-class="apexcharts-tooltip-text-y-value"></span>-</div>-<div-class="apexcharts-tooltip-goals-group">-<span-class="apexcharts-tooltip-text-goals-label"></span-><span-class="apexcharts-tooltip-text-goals-value"></span>-</div>-<div-class="apexcharts-tooltip-z-group">-<span-class="apexcharts-tooltip-text-z-label"></span-><span-class="apexcharts-tooltip-text-z-value"></span>-</div>-</div>-</div>-<div-class="apexcharts-tooltip-series-group"-style="order:-4">-<span-class="apexcharts-tooltip-marker"-style="background-color:-rgb(248,-156,-228)"></span>-<div-class="apexcharts-tooltip-text"-style="-font-family:-Helvetica,-Arial,-sans-serif;-font-size:-12px;-">-<div-class="apexcharts-tooltip-y-group">-<span-class="apexcharts-tooltip-text-y-label"></span-><span-class="apexcharts-tooltip-text-y-value"></span>-</div>-<div-class="apexcharts-tooltip-goals-group">-<span-class="apexcharts-tooltip-text-goals-label"></span-><span-class="apexcharts-tooltip-text-goals-value"></span>-</div>-<div-class="apexcharts-tooltip-z-group">-<span-class="apexcharts-tooltip-text-z-label"></span-><span-class="apexcharts-tooltip-text-z-value"></span>-</div>-</div>-</div>-<div-class="apexcharts-tooltip-series-group"-style="order:-5">-<span-class="apexcharts-tooltip-marker"-style="background-color:-rgb(248,-156,-156)"></span>-<div-class="apexcharts-tooltip-text"-style="-font-family:-Helvetica,-Arial,-sans-serif;-font-size:-12px;-">-<div-class="apexcharts-tooltip-y-group">-<span-class="apexcharts-tooltip-text-y-label"></span-><span-class="apexcharts-tooltip-text-y-value"></span>-</div>-<div-class="apexcharts-tooltip-goals-group">-<span-class="apexcharts-tooltip-text-goals-label"></span-><span-class="apexcharts-tooltip-text-goals-value"></span>-</div>-<div-class="apexcharts-tooltip-z-group">-<span-class="apexcharts-tooltip-text-z-label"></span-><span-class="apexcharts-tooltip-text-z-value"></span>-</div>-</div>-</div>-<div-class="apexcharts-tooltip-series-group"-style="order:-6">-<span-class="apexcharts-tooltip-marker"-style="background-color:-rgb(163,-248,-156)"></span>-<div-class="apexcharts-tooltip-text"-style="-font-family:-Helvetica,-Arial,-sans-serif;-font-size:-12px;-">-<div-class="apexcharts-tooltip-y-group">-<span-class="apexcharts-tooltip-text-y-label"></span-><span-class="apexcharts-tooltip-text-y-value"></span>-</div>-<div-class="apexcharts-tooltip-goals-group">-<span-class="apexcharts-tooltip-text-goals-label"></span-><span-class="apexcharts-tooltip-text-goals-value"></span>-</div>-<div-class="apexcharts-tooltip-z-group">-<span-class="apexcharts-tooltip-text-z-label"></span-><span-class="apexcharts-tooltip-text-z-value"></span>-</div>-</div>-</div>-<div-class="apexcharts-tooltip-series-group"-style="order:-7">-<span-class="apexcharts-tooltip-marker"-style="background-color:-rgb(255,-191,-95)"></span>-<div-class="apexcharts-tooltip-text"-style="-font-family:-Helvetica,-Arial,-sans-serif;-font-size:-12px;-">-<div-class="apexcharts-tooltip-y-group">-<span-class="apexcharts-tooltip-text-y-label"></span-><span-class="apexcharts-tooltip-text-y-value"></span>-</div>-<div-class="apexcharts-tooltip-goals-group">-<span-class="apexcharts-tooltip-text-goals-label"></span-><span-class="apexcharts-tooltip-text-goals-value"></span>-</div>-<div-class="apexcharts-tooltip-z-group">-<span-class="apexcharts-tooltip-text-z-label"></span-><span-class="apexcharts-tooltip-text-z-value"></span>-</div>-</div>-</div>-</div>-</div>-</div>-</div>-<p-class="sc-851a3ed2-0-iMEVFr">-<a-data-cy="view-all-expenses-link"-href="/opensource/transactions?kind=EXPENSE"->View-all-paid-expenses-→</a->-</p>-</div>-<div-class="sc-4af23993-0-sc-4af23993-1-gtcXcj-lbhSJa">-<div-class="sc-4af23993-0-sc-4af23993-1-cgGdYy-hTQXpX">-<p-font-weight="500"-class="sc-851a3ed2-0-kLenlU">Contribuições</p>-<div-class="sc-4af23993-0-sc-4af23993-1-JwXHB-iEQqjr">-<div-class="sc-229c3631-0-mJJBD-css-b62m3t-container"-data-cy="select">-<span-id="react-select-3-live-region"-class="css-7pg0cj-a11yText"></span-><span-aria-live="polite"-aria-atomic="false"-aria-relevant="additions-text"-role="log"-class="css-7pg0cj-a11yText"></span>-<div-class="css-17dfiyn-control">-<div-class="css-hlgwow">-<div-class="css-1erarlk-singleValue">All-time</div>-<input-id="react-select-3-input"-tabindex="0"-inputmode="none"-aria-autocomplete="list"-aria-expanded="false"-aria-haspopup="true"-role="combobox"-aria-activedescendant=""-aria-readonly="true"-class="css-1hac4vs-dummyInput"-value=""-/>-</div>-<div-class="css-1wy0on6">-<span-class="css-1hyfx7x"></span>-<div-class="css-16n3y0y-indicatorContainer"-aria-hidden="true"></div>-</div>-</div>-</div>-<button-class="sc-7d5d76a3-3-etLNBF"></button-><button-class="sc-7d5d76a3-3-kaALua"></button-><button-class="sc-7d5d76a3-3-kaALua"></button-><button-class="sc-7d5d76a3-3-kaALua"></button>-</div>-</div>-<div-class="sc-5373e303-0-ketsss">-<div-class="sc-4af23993-0-sc-4af23993-1-sc-7d5d76a3-2-bRepAB-cOgOUw-bZDKVK">-<div-class="sc-4af23993-0-duRjkC">-<p-font-weight="500"-color="black.700"-class="sc-851a3ed2-0-gwhSBq">-Contribuições-recebidas-</p>-<p-font-weight="500"-class="sc-851a3ed2-0-ddkOhR">388</p>-</div>-<div-class="sc-4af23993-0-duRjkC">-<p-font-weight="500"-color="black.700"-class="sc-851a3ed2-0-gwhSBq">-Amount-collected-</p>-<p-font-weight="500"-class="sc-851a3ed2-0-ddkOhR">-$ 1.970.214,35-</p>-</div>-</div>-</div>-<table-cellspacing="0"-cellpadding="10px"-class="sc-7d5d76a3-0-dKtieI">-<thead>-<tr>-<th>Níveis</th>-<th>#-of-Contributions</th>-<th>Valor</th>-</tr>-</thead>-<tbody>-<tr>-<td>-<div-color="#A3F89C"-class="sc-7d5d76a3-1-jtVJDJ"></div>-one-time-</td>-<td>287</td>-<td>$ 1.180.213,70</td>-</tr>-<tr>-<td>-<div-color="#FFBF5F"-class="sc-7d5d76a3-1-bcLaeg"></div>-recurring-</td>-<td>101</td>-<td>$ 24.987,18</td>-</tr>-</tbody>-</table>-<p-class="sc-851a3ed2-0-iMEVFr">-<a-data-cy="view-all-contributions-link"-href="/opensource/transactions?kind=ADDED_FUNDS%2CCONTRIBUTION"->Ver-todas-as-contribuições-→</a->-</p>-</div>-</div>-</div>-</section>
