JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div id="ralColourExt_fieldautocomplete-list" class="autocomplete-items"><div><strong>B</strong>eige<input type="hidden" id="2" value="Beige"></div><div><strong>B</strong>rown beige<input type="hidden" id="9" value="Brown beige"></div><div><strong>B</strong>room yellow<input type="hidden" id="25" value="Broom yellow"></div><div><strong>B</strong>right red orange<input type="hidden" id="38" value="Bright red orange"></div><div><strong>B</strong>lack red<input type="hidden" id="50" value="Black red"></div><div><strong>B</strong>rown red<input type="hidden" id="52" value="Brown red"></div><div><strong>B</strong>eige red<input type="hidden" id="53" value="Beige red"></div><div><strong>B</strong>lue lilac<input type="hidden" id="73" value="Blue lilac"></div><div><strong>B</strong>lack blue<input type="hidden" id="85" value="Black blue"></div><div><strong>B</strong>rillant blue<input type="hidden" id="87" value="Brillant blue"></div><div><strong>B</strong>lue green<input type="hidden" id="110" value="Blue green"></div><div><strong>B</strong>ottle green<input type="hidden" id="113" value="Bottle green"></div><div><strong>B</strong>rown&nbsp;green<input type="hidden" id="114" value="Brown&nbsp;green"></div><div><strong>B</strong>lack green<input type="hidden" id="118" value="Black green"></div><div><strong>B</strong>lack olive<input type="hidden" id="121" value="Black olive"></div><div><strong>B</strong>eige grey<input type="hidden" id="148" value="Beige grey"></div><div><strong>B</strong>asalt grey<input type="hidden" id="153" value="Basalt grey"></div><div><strong>B</strong>rown grey<input type="hidden" id="154" value="Brown grey"></div><div><strong>B</strong>lack grey<input type="hidden" id="157" value="Black grey"></div><div><strong>B</strong>lue grey<input type="hidden" id="163" value="Blue grey"></div><div><strong>B</strong>lack brown<input type="hidden" id="194" value="Black brown"></div><div><strong>B</strong>eige brown<input type="hidden" id="196" value="Beige...

CSS

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    z-index: 101;
    top: 0%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow: scroll;
}
.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}