JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<form class="dropdown" method="get">
  <input type="text" name="query" class="form-control" placeholder="Type Here" data-toggle="dropdown" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" required id="id_query">

  <ul class="dropdown-menu col-12 pl-2" role="menu" aria-labelledby="dropdownMenuButton" id="list">
    <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Django</a></li>
    <div class="dropdown-divider"></div>
    <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Potato</a></li>
    <div class="dropdown-divider"></div>
    <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Sleep</a></li>
  </ul>

  <input type="submit" value="Search" class="btn btn-lg btn-primary col-12 my-2">
</form>