Painel admin simples feito com HTML e CSS (Flexbox, abordagem mobile-first e responsividade)
Obs: Icons of Font Awesome library/toolkit were also used.
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application Name</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.0/css/all.css">
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="index.css />
</head>
<body>
<div class="two-column-layout">
<header>
<div class="box-brand">
<h2 class="brand">Application Name</h2>
</div>
<nav class="secondary-navigation">
<ul>
<li><a href="#">Link A</a></li>
<li><a href="#">Link B</a></li>
<li><a href="#">Link C</a></li>
</ul>
</nav>
</header>
<aside class="left-sidebar">
<nav class="navigation">
<ul>
<li class="active"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</aside>
<main>
<div class="card-deck">
<div class="card">
<div class="card-body">
<div class="card-content">
<h2>R$ 56.956,00</h2>
Total Income
</div>
<div class="card-icon-space bg-green">
<i class="fa-solid fa-hand-holding-dollar"></i>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-content">
<h2>R$ 20.320,00</h2>
Total Expense
</div>
<div class="card-icon-space bg-red">
<i class="fa-solid fa-money-bill-transfer"></i>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="card-content">
<h2>R$ 36.636,00</h2>
Balance
</div>
<div class="card-icon-space bg-blue">
<i class="fa-solid fa-sack-dollar"></i>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Welcome</h2>
<p>
Content comes here.
</p>
</div>
<div class="container">
<div class="section-box">
<div class="section-box-header">
<h2>Lorem Ipsum</h2>
</div>
<div class="section-box-body">
<p>
Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing elit. Morbi non erat auctor, viverra nisi id, interdum sapien. Suspendisse aliquam consequat tellus, a rhoncus metus vestibulum nec. Aenean fermentum vel odio id tempus. Sed tempor velit vel volutpat dapibus. Integer enim metus, convallis a finibus id, interdum consequat mi. Duis et vulputate augue. Ut pulvinar luctus ante non fermentum. Aenean dapibus, urna eget pretium accumsan, enim nunc congue nisl, et euismod mauris neque in ipsum. In hac habitasse platea dictumst. Vestibulum justo erat, tincidunt ac nibh in, porttitor tempor sapien.
</p>
<p>
Maecenas consequat vitae ligula eu vehicula. Quisque vehicula lobortis tellus, in elementum dui luctus vel. Donec maximus velit nibh, vel pretium erat bibendum porta. Sed et nulla ex. Suspendisse interdum quam ligula, eu fermentum dui egestas sed. Donec quis nibh dapibus, lobortis mauris quis, consectetur neque. Pellentesque a mauris purus. Ut ut mi vitae nunc scelerisque vehicula. Interdum et malesuada fames ac ante ipsum primis in.
</p>
</div>
</div>
</div>
<div class="container">
<h2>Table Sample</h2>
<div class="table-wrapper">
<table class="table" role="table" summary="Financial recent activity report table">
<caption>Financial Recent Activity</caption>
<thead>
<tr>
<th scope="col">Type</th>
<th scope="col">Title</th>
<th scope="col">Category</th>
<th scope="col">Amount (R$)</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="badge-pill badge-danger">Expense</span></td>
<td>Personal mobile phone</td>
<td>Phone</td>
<td>200,00</td>
<td>2024-02-14</td>
</tr>
<tr>
<td><span class="badge-pill badge-danger">Expense</span></td>
<td>Monthly supply</td>
<td>Food</td>
<td>200,00</td>
<td>2024-02-06</td>
</tr>
<tr>
<td><span class="badge-pill badge-success">Income</span></td>
<td>Fev 2024</td>
<td>Salary</td>
<td>1.500,00</td>
<td>2024-02-05</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Type</td>
<td>Title</td>
<td>Category</td>
<td>Amount (R$)</td>
<td>Date</td>
</tr>
</tfoot>
</table>
</div>
</div>
</main>
<footer>
<span>
Copyright © 2024
</span>
</footer>
</div>
</body>
</html>