JSFiddle - React, Tailwind, and code Playground

HTML

<form action="/echo/jsonp/">
  <div class="dropdown" tabindex="-1">
    <span>Option 1</span>
    <div>
      <ul>
        <li><input type="submit" name="sel" value="Option 2"/></li>
        <li><input type="submit" name="sel" value="Option 3"/></li>
        <li><a href="/echo/jsonp/?sel=4">Option 4</a></li>
      </ul>
    </div>
  </div>
  Hello World!<br/>
  Hello World!<br/>
</form>

CSS

.dropdown, .dropdown * {
  display: block;
  margin: unset;
  padding: unset;
  border: unset;
  background: unset;
  list-style: none;
  text-decoration: unset;
  color: unset;
  font: unset;
  box-sizing: border-box;
  text-align: unset;
  cursor: unset;
}

.dropdown {
  display: inline-block;
  width: max-content;
/*  min-width: 10em; */
  contain: layout;
  vertical-align: middle;
  cursor: pointer;
}

.dropdown > div {
  display: none;
  float: right;
  min-width: 100%;
  height: 0;
}

.dropdown:focus > div,
.dropdown:focus-within > div,
.dropdown:active > div {
  display: block;
}

.dropdown > span, .dropdown > div > ul {
  border: 1px solid #000;
}

.dropdown > span {
  background-color: yellow;
}

.dropdown > div > ul {
  position: relative;
  background-color: cyan;
}

.dropdown > span, .dropdown > div > ul > li > * {
  padding: 0.2em 0.4em;
  min-width: 100%;
}

.dropdown > span::after {
  content: ' â–Ľ';
  float: right;
}