JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Do not copy this code -->
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Age Calculator</title>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  </head>

  <body>
    <div id="main_container">
    
      <div id="birth_date_input">
        <h4>أدخل العمر : </h4> 
        <input type="date" id="birth_date" placeholder="mm/dd/yyyy">
      </div>
      
      <br/>
      <div id="calculate" class="btn btn--primary uppercase">
      تأكد من تصريح الدخول
      </div>

      <div id="age_container">
        <span id="exact_age">العمر</span>
      </div>
          
    </div>
  </body>

</html>

CSS

@import url(//fonts.googleapis.com/earlyaccess/notonaskharabic.css);

html {
  direction: rtl;
  font-family: 'noto naskh arabic', sans-serif;
}

body {
  background: #20262E;
  padding: 20px;
}

#main_container {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

@media (max-width: 768px) {
  #main_container {
    width: 100%;
  }
}

#birth_date_input,
#age_container {
  text-align: center;
  margin: 20px;
  margin-left: auto;
  margin-right: auto;
}

#age_container {
/*   width: 300px;
  background: #fff;
  color: #a3a3a3;
  font: inherit;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
  border: 0;
  outline: 0;
  padding: 5px 18px;
  background-color: non;
  display: none; */
}

#age {
  padding: 5px;
}

#birth_date {
  background: #fff;
  color: #a3a3a3;
  font: inherit;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
  border: 0;
  outline: 0;
  padding: 12px 20px;
  text-align: center;
}

.btn {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

.btn--primary {
  background: #7f8ff4;
  color: #fff;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  padding: 12px 36px;
}

.btn--primary:hover {
  background: #6c7ff2;
  cursor: pointer;
}

.btn--primary:active {
  background: #7f8ff4;
  box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2);
}

#young {
  font-size: 18px;
  color: #52B94A;
}

#exact_age {
  font-size: 18px;
  color: #B94D4B;
}

JavaScript

$(document).ready(function() {
  $("#calculate").click(function() {
    var mdate = $("#birth_date").val().toString();
    var yearThen = parseInt(mdate.substring(0, 4), 10);
    var monthThen = parseInt(mdate.substring(5, 7), 10);
    var dayThen = parseInt(mdate.substring(8, 10), 10);

    var today = new Date();
    var birthday = new Date(yearThen, monthThen - 1, dayThen);

    var differenceInMilisecond = today.valueOf() - birthday.valueOf();

    var days = Math.round(differenceInMilisecond / (60 * 60 * 24 * 1000));

    if (differenceInMilisecond < 0) {
      $('#age_container').css('display', 'none');
      alert('لا يمكن أن يكون تاريخ الميلاد أقل من التاريخ الحالي');
      return;
    }

    var year_age = Math.floor(differenceInMilisecond / 31536000000);
    var day_age = Math.floor((differenceInMilisecond % 31536000000) / 86400000);

    if ((today.getMonth() == birthday.getMonth()) && (today.getDate() == birthday.getDate())) {
      alert("عيد ميلاد سعيد!!!");
    }

    var month_age = Math.floor(day_age / 30);

    day_age = day_age % 30;

    if (isNaN(year_age) || isNaN(month_age) || isNaN(day_age)) {
      $("#exact_age").text("تاريخ ميلاد خاطئ نرجوا المحاولة مرة اخرى");
    } else {
      $('#age_container').css('display', 'block');
$("#exact_age").html(" <p id='young'></p><p id='days'></p><p>عمرك هو</p><p id=\"age\">" + year_age + " سنة " + month_age + " شهر " + day_age + " يوم</p>");

      if (year_age <= 16) {
        $('#young').html('يسمح الدخول بدون الحاجه لفيزة');
      } else if (year_age > 16 && year_age <= 49) {
        $('#young').html('تحتاج استخراج فيزا للدخول');
      } else if (year_age > 49) {
        $('#young').html('لا تحتاج لفيزة للدخول');
      }

    }
  });
});