JSFiddle - React, Tailwind, and code Playground

HTML

<div>
        <ul style="list-style-type: none;">
            <li>
                <a href="#" id="usd-toggle">USD</a> 
                <a href="#" id="hkd-toggle">HKD</a> 
                <p id="usd">suhh</p>
                <p id="hkd">duuude</p>
            </li>
        </ul>
    </div>

CSS

div p {
  transition: opacity 0s;
  display: block;
  overflow: hidden;
  position: relative
}
div p#usd {
  opacity: 1;
  height: auto;
}
div p#hkd{
  opacity: 0;
  height: 0;
}

#hkd-toggle:focus ~ #hkd {
  opacity: 1;
  height: auto;
  position: absolute;
}
#hkd-toggle:focus ~ #usd {
  opacity: 0;
  height: 0;
  position: absolute
}