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">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Find color name</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .search-box, .result-box {
      width: 1000px;
      margin:0 auto;
    }
  </style>
</head>
<body>
  <div class="search-box">
    <input type="text" id="colorInput">
    <button id="submitBtn">Submit</button>
  </div>
  <div class="result-box">
    <h1>The closest color is: <strong id="closestColorName"></strong></h1>
    <h1 id="closestColorValue"></h1>
  </div>
</body>
</html>

JavaScript

const colorMap = {
  "Vivid Pink": "#FF7E93",	 
  "Strong Pink": "#FD7B7C",	 
  "Deep Pink": "#F3545E",	 
  "Light Pink": "#FFBCAD",	 
  "Moderate Pink": "#EE9086",	 
  "Dark Pink": "#C76864",	 
  "Pale Pink": "#FFCBBB",	 
  "Grayish Pink": "#CF9B8F",	 
  "Pinkish White": "#F9DBC8",	 
  "Pinkish Gray": "#C8A696",	 
  "Vivid Red": "#C10020",	 
  "Strong Red": "#BF2233",	 
  "Deep Red": "#7B001C",	 
  "Very Deep Red": "#4F0014",	 
  "Moderate Red": "#AB343A",	 
  "Dark Red": "#681C23",	 
  "Very Dark Red": "#320A18",	 
  "Light Grayish Red": "#B17267",	 
  "Grayish Red": "#8C4743",	 
  "Dark Grayish Red": "#482A2A",	 
  "Blackish Red": "#1F0E11",	 
  "Reddish Gray": "#8B6C62",	 
  "Dark Reddish Gray": "#523C36",	 
  "Reddish Black": "#1E1112",	 
  "Vivid Yellowish Pink": "#FF845C",	 
  "Strong Yellowish Pink": "#FF7A5C",	 
  "Deep Yellowish Pink": "#F64A46",	 
  "Light Yellowish Pink": "#FFB28B",	 
  "Moderate Yellowish Pink": "#EE9374",	 
  "Dark Yellowish Pink": "#CC6C5C",	 
  "Pale Yellowish Pink": "#FFC8A8",	 
  "Grayish Yellowish Pink": "#D39B85",	 
  "Brownish Pink": "#CD9A7B",	 
  "Vivid Reddish Orange": "#F13A13",	 
  "Strong Reddish Orange": "#FFB961",	 
  "Deep Reddish Orange": "#A91D11",	 
  "Moderate Reddish Orange": "#D35339",	 
  "Dark Reddish Orange": "#9B2F1F",	 
  "Grayish Reddish Orange": "#B85D43",	 
  "Strong Reddish Brown": "#7F180D",	 
  "Deep Reddish Brown": "#490005",	 
  "Light Reddish Brown": "#AA6651",	 
  "Moderate Reddish Brown": "#712F26",	 
  "Dark Reddish Brown": "#321011",	 
  "Light Grayish Reddish Brown": "#966A57",	 
  "Grayish Reddish Brown": "#5E3830",	 
  "Dark Grayish Reddish Brown": "#371F1C",	 
  "Vivid Orange": "#FF6800",	 
  "Brilliant Orange": "#FFB841",	 
  "Strong Orange": "#FF6F1A",	 
  "Deep Orange": "#C34D0A",	 
  "Light Orange": "#FFA161",	 
  "Moderate Orange": "#E8793E",	 
  "Brownish Orange": "#B15124",	 
  "Strong Brown": "#753313",	 
  "Deep Brown": "#4D220E",	 
  "Light Brown": "#A86540",	 
  "Moderate...