JSFiddle - React, Tailwind, and code Playground

HTML

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <script src="js/tip.js"></script>

  <title>Frontend Mentor | Tip calculator app</title>

</head>

<body>
  <h1 class="title">SPLI<br>TTER</h1>
  <form class="calculator">

    <div class="main-cols">
      <div class="bill">

        <h2 class="bill__heading"><label for="bill__amount" class="accent-title">Bill</label></h2>
        <input type="text" name="bill__amount" id="bill__amount" class="bill__amount" placeholder="0">

      </div>
      <div class="tip">

        <h2 class="tip__heading"><label for="" class="accent-title">Select Tip %</label></h2>
        <div class="tip__btns">
          <button type="button" value="5" class="btn btn-main">5%</button>    <!-- I added the value properties -->
          <button type="button" value="10" class="btn btn-main">10%</button>
          <button type="button" value="15" class="btn btn-main">15%</button>
          <button type="button" value="25" class="btn btn-main">25%</button>
          <button type="button" value="50" class="btn btn-main">50%</button>
          <input type="text" name="tip__custom" class="tip__custom" id="tip__custom" placeholder="Custom">
        </div>
      </div>

      <div class="no-of-people">
        <h2 class="no-of-people__heading"><label for="people-no" class="accent-title">Number of People</label></h2>
        <input type="text" name="people-no" id="people-no" class="people-no" placeholder="1"> <!-- I changed the placeholder to 1 so it makes more sense -->
      </div>
    </div>

    <div class="main-cols">
      <div class="tip-amount">

        <div class="col">
          <h2 class="neutral-title">Tip Amount</h2>
          <h3 class="accent-title-light ">/...

CSS

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
:root {
  --clr-primary: hsl(172, 67%, 45%);
  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-neutral-200: hsl(189, 41%, 97%);
  --clr-neutral-300: hsl(185, 41%, 84%);
  --clr-neutral-400: hsl(184, 14%, 56%);
  --clr-neutral-500: hsl(186, 14%, 43%);
  --clr-neutral-600: hsl(183, 100%, 15%);
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: 'Space Mono', monospace;
  background: var(--clr-neutral-300);
  font-size: 1rem;
  font-weight: 400;
}

button {
  font-family: 'Space Mono', monospace;
  text-transform: uppercase;
  border: none;
  padding: 0.3em 0.6em;
  border-radius: 0.45rem;
  font-size: 1.4rem;
  font-weight: 700;
}

.btn-main {
  background-color: var(--clr-neutral-600);
  color: var(--clr-neutral-100);
}

.btn-main:hover,
.btn-main:focus {
  background-color: var(--clr-primary);
  color: var(--clr-neutral-600);
}

.btn-inverse {
  background-color: var(--clr-primary);
  color: var(--clr-neutral-600);
}

.title {
  color: var(--clr-neutral-500);
  text-align: center;
  letter-spacing: .35em;
  padding: 1em 0;
}

form {
  background: var(--clr-neutral-100);
  border-radius: 1.8rem 1.8rem 0 0;
}

.accent-title {
  color: var(--clr-neutral-500);
}

.accent-title-light {
  color: var(--clr-neutral-400);
  font-size: .8rem;
}

.tip-amount {
  background: var(--clr-neutral-600);
  border-radius: 1rem;
  padding: 1.6rem;
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
  justify-content: space-between;
}

.neutral-title {
  color: var(--clr-neutral-100);
}

input {
  border: none;
  background-color: var(--clr-neutral-200);
  width: 100%;
  border-radius: .25rem;
}

.bill__amount,
.people-no {
  height: 40px;
  text-align: right;
  font-family: 'Space Mono', monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--clr-neutral-600);
  padding-right:...

JavaScript

let allButtons = document.getElementsByClassName('btn');
let noOfButtons = allButtons.length;
let i;

function tipCalculate(e) {
  let billAmount = parseFloat(document.getElementById('bill__amount').value || 0);    // I added the '|| 0' part in case the user does not enter anything
  let tipPercent = e.target.value;
  let noOfPeople = document.getElementById('people-no').value || 1; // I added the '|| 1' part
  let tipAmountPerPerson = billAmount / 100 * tipPercent / noOfPeople;
  let totalAmountPerPerson = (billAmount + (billAmount / 100 * tipPercent)) / noOfPeople;
  document.getElementsByClassName('tip-amount-display')[0].innerHTML = tipAmountPerPerson;      // I fixed these
  document.getElementsByClassName('total-amount-display')[0].innerHTML = totalAmountPerPerson;
}

// append event listeners to each button
for (i = 0; i < noOfButtons; i++) {
  allButtons[i].addEventListener('click', tipCalculate);
}