JSFiddle - React, Tailwind, and code Playground

HTML

<form class="search-form">
  <input type="text" class="search" placeholder="Disease or Code">
  <ul class="suggestions">
    <li>Filter for a disease or code</li>
  </ul>
</form>

<p class="info">Using JavaScript, replicate the <a href="https://medicalvalues.de/wp-content/uploads/2021/01/js_challenge.mp4" target="_blank">functionality found here</a>. <br> The solution does not have to be perfect. Most important is to see how you approach such tasks.</p>

CSS

html {
      box-sizing: border-box;
      background: #4a2ace;
      font-family: 'helvetica neue';
      font-size: 20px;
      font-weight: 200;
    }
    
    body {
      background: none;
    }
    
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    
    input {
      width: 100%;
      padding: 20px;
    }
    
    .search-form {
      max-width: 400px;
      margin: 50px auto;
    }
    
    input.search {
      margin: 0;
      text-align: center;
      outline: 0;
      border: 0;
      border: 10px solid #F7F7F7;
      width: 120%;
      left: -10%;
      position: relative;
      top: 10px;
      z-index: 2;
      border-radius: 5px;
      font-size: 40px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
    }
    
    .suggestions {
      margin: 0;
      padding: 0;
      position: relative;
    }
    
    .suggestions li {
      background: white;
      list-style: none;
      border-bottom: 1px solid #D8D8D8;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
      margin: 0;
      padding: 20px;
      transition: background 0.2s;
      display: flex;
      justify-content: space-between;
    }
    
    .suggestions li:nth-child(even) {
      transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
      background: linear-gradient(to bottom, #ffffff 0%, #EFEFEF 100%);
    }
    
    .suggestions li:nth-child(odd) {
      transform: perspective(100px) rotateX(-3deg) translateY(3px);
      background: linear-gradient(to top, #ffffff 0%, #EFEFEF 100%);
    }
    
    span.abbr {
      font-size: 15px;
    }
    
    .details {
      text-align: center;
      font-size: 15px;
    }
    
    .hl {
      background: #ffc600;
    }
    
    .info {
      text-align: center;
      line-height: 2;
      color: white;
    }
    
    a {
      color: white;
      background: rgba(0, 0, 0, 0.1);
      text-decoration: none;
    }

JavaScript

// Fetch the data from this url and create a typeahead to filter by disease name or code

// each disease should be a <li> in the suggestions <ul>

// there is a span class of `hl` to highlight matches

// Demo: https://medicalvalues.de/wp-content/uploads/2021/01/js_challenge.mp4

// You are free to use additional libraries or frameworks, please just do not copy the whole code from somwhere else

// Once you are done, save this fiddle and send us the url

const url = 'https://raw.githubusercontent.com/NCI-CBIIT/FHH/master/data/diseases.json';