JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="dropdown custom-dropdown">
  <button type="button" class="btn-search dropdown-toggle" data-toggle="dropdown">
    Dropdown button <img 
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div>
</div>

CSS

body { padding:24px;}


.btn-search {
  border:solid 1px #ccc;
  padding:16px;
  outline:0;
      transition: color .15s ease-in-out,
      background-color .15s ease-in-out,
      border-color .15s ease-in-out,
      box-shadow .15s ease-in-out;
}
.btn-search:focus {
   outline:0;
  
}
.btn-search:after {
  border:none;
  content:"v" ;
}
.custom-dropdown {
  position:relative;
}
 .custom-dropdown.show >.btn-search.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgb(108 117 125 / 50%);