HTML Code:

<div class="container">
  <div class="inputs-wrapper">
    <input type="date" id="date-input">
    <button onclick="ageCalculate()">Calculate</button>
  </div>
  <div class="outputs-wrapper">
    <div>
      <span id="years">-</span>
      <p>Years</p>
    </div>
    <div>
      <span id="months">-</span>
      <p>Months</p>
    </div>
    <div>
      <span id="days">-</span>
      <p>Days</p>
    </div>
  </div>
</div>

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*,
*:before,
*:after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins",sans-serif;
}
body{
  background-color: #1e293b;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center
}
.container{
  width: 40%;
  min-width: 450px;
  padding: 50px 30px;
}
.container *{
  font-family: "Poppins",sans-serif;
}
.inputs-wrapper{
  background-color: #f5f7fb;
  padding: 30px 25px;
  border-radius: 1rwm;
  margin-bottom: 50px;
}
input,
button{
  height: 50px;
  background-color: #e8eaec;
  color: #080808;
  font-weight: 500;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1)
}
input{
  width: 60%;
  padding: 0 20px;
  font-size: 14px;
}
button{
  width: 30%;
  float: right;
  box-shadow: 4px 4px 8px rgb(189 200 213), -4px -4px 8px rgb(255 255 255);
  cursor: pointer;
}
.outputs-wrapper{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.outputs-wrapper div{
  height: 100px;
  width: 100px;
  background-color: #fff;
  border-radius: 5px;
  color: #000;
  display: grid;
  place-items: center;
  padding: 20px 0;
}
span{
  font-size: 30px;
  font-weight: 500;
}
p{
  font-size: 14px;
  color: #707070;
  font-weight: 400;
}

JavaScript Code:

const months = [31,28,31,30,31,30,31,31,30,31,30,31];

function ageCalculate(){
  let today = new Date();
  let inputDate = new Date(document.getElementById("date-input").value);
  let birthMonth,birthDate,birthYear;
  let birthDetails = {
    date:inputDate.getDate(),
    month:inputDate.getMonth()+1,
    year:inputDate.getFullYear()
  }
  let currentYear = today.getFullYear();
  let currentMonth = today.getMonth()+1;
  let currentDate = today.getDate();

  leapChecker(currentYear);

  if(
    birthDetails.year > currentYear ||
    ( birthDetails.month > currentMonth && birthDetails.year == currentYear) || 
    (birthDetails.date > currentDate && birthDetails.month == currentMonth && birthDetails.year == currentYear)
  ){
    alert("Not Born Yet");
    displayResult("-","-","-");
    return;
  }

  birthYear = currentYear - birthDetails.year;

  if(currentMonth >= birthDetails.month){
    birthMonth = currentMonth - birthDetails.month;
  }
  else{
    birthYear--;
    birthMonth = 12 + currentMonth - birthDetails.month;
  }

  if(currentDate >= birthDetails.date){
    birthDate = currentDate - birthDetails.date;
  }
  else{
    birthMonth--;
    let days = months[currentMonth - 2];
    birthDate = days + currentDate - birthDetails.date;
    if(birthMonth < 0){
      birthMonth = 11;
      birthYear--;
    }
  }
  displayResult(birthDate,birthMonth,birthYear);
}

function displayResult(bDate,bMonth,bYear){
  document.getElementById("years").textContent = bYear;
  document.getElementById("months").textContent = bMonth;
  document.getElementById("days").textContent = bDate;
}

function leapChecker(year){
  if(year % 4 == 0 || (year % 100 == 0 && year % 400 == 0)){
    months[1] = 29;
  }
  else{
    months[1] = 28;
  }
}

Preview: