JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
    <link href="/assets/styles.css" rel="stylesheet">
    <title>Multi Converter</title>
  </head>

  <body>
    <header>
      <!-- Title -->
      <h1 id="title">Multi Converter</h1>
    </header>

    <main>
      <!-- About -->
      <nav>
        <!-- Nav -->
        <ul class="nav nav-pills justify-content-center" id="main-tab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="temperature-tab" data-bs-toggle="pill" data-bs-target="#temperature" type="button" role="tab" aria-controls="temperature" aria-selected="true">
              <h2>Temperature</h2>
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="length-tab" data-bs-toggle="pill" data-bs-target="#length" type="button" role="tab" aria-controls="length" aria-selected="false">Length</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="weight-tab" data-bs-toggle="pill" data-bs-target="#weight" type="button" role="tab" aria-controls="weight" aria-selected="false">Weight</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="speed-tab" data-bs-toggle="pill" data-bs-target="#speed" type="button" role="tab"...

CSS

:root {
  --primary-color: #bbbbbb;
  --border-color: #dadce0;
  --link-color: #212529;
}

body {
  background: #ededed;
  padding-left: 1rem;
  padding-right: 1rem;
}

header,
footer {
  background-color: var(--primary-color);
  border-radius: 12px;
}

main {
  min-height: 100vh;
  min-height: calc(100vh - 126px);
  min-height: -moz-calc(100vh - 126px);
  min-height: -webkit-calc(100vh - 126px);
  position: relative;
}

a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-color);
  font-weight: 500;
  text-decoration: none;
}

#title {
  margin: 0;
  padding: 0.5rem;
  font-size: 2rem;
  font-weight: 200;
  letter-spacing: 0.2rem;
  text-align: center;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  margin: 1rem;
}

.nav-pills .nav-link {
  color: var(--link-color);
}

.nav-pills .nav-link.active {
  color: var(--link-color);
  background-color: var(--primary-color);
}

h2 {
  font-size: 1rem;
  margin-bottom: 0;
}

h3 {
  font-size: 1.5rem;
}

input {
  width: 9rem;
  text-align: center;
  border: 0;
  padding: 0.75rem 0;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

input[name="decimal"] {
  width: 4rem;
  margin: 0 10px;
  padding: 1px 2px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 0.9rem;
}

.block-input {
  display: inline-block;
  margin: 0.5rem;
  border: 1px solid var(--border-color);
}

h4 {
  font-size: 0.9rem;
  text-align: center;
  padding: 0.25rem 0;
  margin-bottom: 0;
  border-top: 1px solid var(--border-color);
  background-color: #F8F9FA;
}

JavaScript

window.oninput = function(event) {
  var campo = event.target.id; // Obtém o ID do campo que chamou o evento

  // DECIMAL SET
  var i = document.getElementById("decimalTemp").value;
  ºC.value = (ºC.value * 1).toFixed(i);
  ºK.value = (ºK.value * 1).toFixed(i);
  ºF.value = (ºF.value * 1).toFixed(i);
  ºRa.value = (ºRa.value * 1).toFixed(i);
  ºRø.value = (ºRø.value * 1).toFixed(i);
  ºN.value = (ºN.value * 1).toFixed(i);
  ºDe.value = (ºN.value * 1).toFixed(i);
  ºRé.value = (ºRé.value * 1).toFixed(i);

  // TEMPERATURE
  if (campo == "ºC") {
    ºK.value = (ºC.value * 1 + 273.15).toFixed(i);
    ºF.value = (ºC.value * 1.8 + 32).toFixed(i);
    ºRa.value = ((ºC.value * 1 + 273.15) * 1.8).toFixed(i);
    ºRø.value = (ºC.value * 21 / 40 + 7.5).toFixed(i);
    ºN.value = (ºC.value * 33 / 100).toFixed(i);
    ºDe.value = ((100 - ºC.value) * 3 / 2).toFixed(i);
    ºRé.value = (ºC.value * 4 / 5).toFixed(i);
  } else if (campo == "ºK") {
    ºC.value = (ºK.value * 1 - 273.15).toFixed(i);
    ºF.value = (ºK.value * 1.8 - 459.889).toFixed(i);
    ºRa.value = (ºK.value * 1.8).toFixed(i);
    ºRø.value = ((ºK.value - 273.15) * 21 / 40 + 7.5).toFixed(i);
    ºN.value = ((ºK.value - 273.15) * 33 / 100).toFixed(i);
    ºDe.value = ((373.15 - ºK.value) * 3 / 2).toFixed(i);
    ºRé.value = ((ºK.value - 273.15) * 0.8).toFixed(i);
  } else if (campo == "ºF") {
    ºC.value = ((ºF.value * 1 - 32) / 1.8).toFixed(i);
    ºK.value = ((ºF.value * 1 + 459.67) / 1.8).toFixed(i);
    ºRa.value = (ºF.value * 1 + 459.67).toFixed(i);
    ºRø.value = ((ºF.value - 32) * 7 / 24 + 7.5).toFixed(i);
    ºN.value = ((ºF.value - 32) * 11 / 60).toFixed(i);
    ºDe.value = ((212 - ºF.value) * 5 / 6).toFixed(i);
    ºRé.value = ((ºF.value - 32) / 2.25).toFixed(i);
  } else if (campo == "ºRa") {
    ºC.value = (ºRa.value / 1.8 - 273.15).toFixed(i);
    ºK.value = (ºRa.value / 1.8).toFixed(i);
    ºF.value = (ºRa.value * 1 - 459.67).toFixed(i);
    ºRø.value = ((ºRa.value - 491.67) * 7 / 24 +...