JSFiddle - React, Tailwind, and code Playground
by tsureishi
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://neofusion.github.io/hierarchy-select/v2/assets/pygments.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://neofusion.github.io/hierarchy-select/v2/dist/hierarchy-select.min.css" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://neofusion.github.io/hierarchy-select/v2/assets/highlight.css"
crossorigin="anonymous"> -->
</head>
<body>
<div class="dropdown hierarchy-select" id="example-one" style="max-width:300px;">
<button type="button" class="btn btn-secondary dropdown-toggle" id="example-one-button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="example-one-button">
<div class="hs-searchbox">
<input type="text" class="form-control" autocomplete="off">
</div>
<div class="hs-menu-inner">
<a class="dropdown-item" data-value="" data-level="1" data-default-selected="" href="#">All categories</a>
<a class="dropdown-item" data-value="1" data-level="1" href="#">Wine</a>
<a class="dropdown-item" data-value="2" data-level="2" href="#">Color</a>
<a class="dropdown-item" data-value="3" data-level="3" href="#">Red</a>
<a class="dropdown-item" data-value="4" data-level="3" href="#">B11XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a>
<a class="dropdown-item" data-value="5" data-level="3" href="#">Rose</a>
<a...