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://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 customdropdown-outline">
  <button type="button" class="  btn-customDropdown dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </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;}

.customdropdown-outline .btn-customDropdown {
  background:none;
  color:#000;
  border-color:#000;
}
.customdropdown-outline .btn-customDropdown:hover,
.customdropdown-outline .btn-customDropdown:focus,
.customdropdown-outline .btn-customDropdown:active {
background:none !important;
color:#000 !important;  
border-color:#000 !important;
     
}