BMI calculator App.jsx base HTML and CSS

App.jsx

function App() {
  return (
    <div className="min-h-screen h-screen m-0 bg-stone-100">
      <div className="flex h-1/5 justify-center items-center mx-auto">
        <h1 className="text-5xl">Welcome to BMI Calculator</h1>
      </div>
      <div className="flex h-3/5 justify-center items-center mx-auto">
        {/* user input card */}
        <div className="max-w-sm rounded-lg overflow-hidden shadow-lg bg-orange-200 w-80 h-96 flex flex-col">
          {/* toggle container */}
          <div>toggle button here</div>
          {/* main user input section */}
          <div className="px-4 py-4 grow flex flex-col justify-evenly">
            {/* height section */}
            <div className="flex justify-between mb-2">
              <div className="w-1/2 ml-6 text-xl">
                <span>Height: </span>
              </div>
              {/* unit section */}
              <div className="w-1/2 flex flex-col ml-6">
                <div>
                  <input type="number" className="mb-1 w-14 rounded-lg" />
                  <label className="ml-2"></label>
                </div>
                <div>
                  <input type="number" className="mb-1 w-14 rounded-lg" />
                  <label className="ml-2"></label>
                </div>
              </div>
            </div>
            {/* weight section */}
            <div className="flex justify-between">
              <div className="w-1/2 ml-6 text-xl">
                <span>Weight: </span>
              </div>
              {/* unit section */}
              <div className="w-1/2 flex flex-col ml-6">
                <div>
                  <input type="number" className="mb-1 w-14 rounded-lg" />
                  <label className="ml-2"></label>
                </div>
              </div>
            </div>
          </div>
          <div className="px-4 pt-4 pb-2 flex justify-center items-center mx-auto">
            <button
              className="inline-block bg-white rounded-full px-3 py-1 text-md font-semibold text-gray-700 border-black border-2
              hover:bg-gray-100"
            >
              Calculate
            </button>
          </div>
        </div>
        {/* bmi number and circle progress bar card */}
        <div className="max-w-sm rounded-lg overflow-hidden shadow-lg bg-orange-200 w-80 h-96 mx-10 flex flex-col">
          <div className="px-6 py-4 justify-center items-center mx-auto flex flex-col">
            <div className="font-bold text-xl mb-2">
              <span>Result</span>
            </div>
          </div>
          {/* progress bar here */}
          <div className="px-6 py-4 justify-center items-center mx-auto h-1/2 grow"></div>
          {/* status here */}
          <div className="px-6 py-4 justify-center items-center mx-auto flex flex-col">
            <div className="font-bold text-xl mb-2">
              <span>Status</span>
            </div>
          </div>
        </div>
        {/* explanation card */}
        <div className="max-w-sm rounded-lg overflow-hidden shadow-lg bg-orange-200 w-80 h-96 mx-10 flex flex-col">
          <div className="px-6 py-4">
            <div className="font-bold text-xl mb-2">What is BMI?</div>
            <p className="text-gray-700 text-base mb-2">
              BMI is an inexpensive and easy screening method for weight
              category—underweight, healthy weight, overweight, and obesity. BMI
              does not measure body fat directly, but BMI is moderately
              correlated with more direct measures of body fat. Furthermore, BMI
              appears to be as strongly correlated with various metabolic and
              disease outcome as are these more direct measures of body fatness.
            </p>
            <p>
              Source:{" "}
              <a
                href="https://www.cdc.gov/healthyweight/assessing/bmi/adult_bmi/index.html"
                className="text-blue-600 underline"
                target="_blank"
                rel="noreferrer"
              >
                CDC
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;