>>>>>>>>>>>>>>>>>>>>> UPTIME <<<<<<<<<<<<<<<<<<<<<<<<

HTML:

<div class="uptime-header">
  <img
    src="https://iili.io/3Q95mOP.png"
    class="uptime-icon"
    alt="Uptime"
  >
  <div class="uptime-title">UPTIME</div>
  <div class="uptime-badge">
    {{data.[0].[Last *]}}
  </div>
</div>


CSS:

.uptime-header {
  display: flex;
  align-items: center;
  background: #1E223C;
  color: white;
  border-radius: 20px;
  padding: 20px 20px;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

.uptime-icon {
  width: 45px;
  height: 45px;
  margin-left: 10px;
  margin-right: 15px;
  filter: invert(1) brightness(2);
}

.uptime-title {
  flex-grow: 1;
  font-size: 16px;
}

.uptime-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 60px;
  border-radius: 50px;
  padding: 6px 22px;
  background: #2ecc71;
  color: black;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}



>>>>>>>>>>>>>>>>>>>>> MEMÓRIA TOTAL <<<<<<<<<<<<<<<<<<<<<<<<

HTML:

<div class="memoria-header">
  <img
    src="https://iili.io/3Ly7PHB.png"
    class="memoria-icon"
    alt="MEMÓRIA"
  >
  <div class="memoria-title">MEMÓRIA TOTAL</div>
  <div class="memoria-badge">
    {{data.[0].[Last *]}}
  </div>
</div>


CSS:

.memoria-header {
  display: flex;
  align-items: center;
  background: #1E223C;
  color: white;
  border-radius: 20px;
  padding: 20px 20px;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

.memoria-icon {
  width: 45px;
  height: 45px;
  margin-left: 10px;
  margin-right: 15px;
  filter: invert(1) brightness(2);
}

.memoria-title {
  flex-grow: 1;
  font-size: 16px;
}

.memoria-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 60px;
  border-radius: 50px;
  padding: 6px 22px;
  background: #2ecc71;
  color: black;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}



>>>>>>>>>>>>>>>>>>>>> CPU CORES <<<<<<<<<<<<<<<<<<<<<<<<

HTML:

<div class="cores-header">
  <img
    src="https://iili.io/3Q9htNs.png"
    class="cores-icon"
    alt="CORES"
  >
  <div class="cores-title">CPU CORES</div>
  <div class="cores-badge">
    {{data.[0].[Last *]}}
  </div>
</div>


CSS:

.cores-header {
  display: flex;
  align-items: center;
  background: #1E223C;
  color: white;
  border-radius: 20px;
  padding: 20px 20px;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

.cores-icon {
  width: 45px;
  height: 45px;
  margin-left: 10px;
  margin-right: 15px;
  filter: invert(1) brightness(2);
}

.cores-title {
  flex-grow: 1;
  font-size: 16px;
}

.cores-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 60px;
  border-radius: 50px;
  padding: 6px 22px;
  background: #2ecc71;
  color: black;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}