Click to reveal feature with Tailwind CSS

Today I wanted to go over a quick little UI element I added for a recent consultancy gig. The idea was to toggle the visibility of a user’s API key in their account’s settings (I think Stripe did a similar thing in the past, but couldn’t find it in their dashboard). The beautiful thing about this solution is that it doesn’t need any JavaScript at all. Winning! 🏆 Whenever I can skip JavaScript (although it is my second-favorite language), I go for it.

This is the element I am going for:

<span class="block select-all blur-[3px] peer-checked/toggle:blur-none">
  sk_test_4eC39HqLyjWDarjtT1zdp7dc
</span>

Let’s go over how it’s done. First, the non-togglable element:

<fieldset class="relative px-3 py-2 text-sm font-medium max-w-md text-slate-800 border border-slate-200 rounded-md">
  <span>
    sk_test_4eC39HqLyjWDarjtT1zdp7dc
  </span>
</fieldset>

This creates the basic container with some nice styling. The relative positioning is important for the toggle button that comes later.

Next, adding the blur effect to the API key:

<fieldset class="relative px-3 py-2 text-sm font-medium max-w-md text-slate-800 border border-slate-200 rounded-md">
  <span class="block select-all blur-[3px]">
    sk_test_4eC39HqLyjWDarjtT1zdp7dc
  </span>
</fieldset>

The blur-[3px] creates the blurred effect, while select-all ensures you can still copy the entire key.

Finally, here’s the complete solution with the button and Tailwind CSS magic:

<fieldset class="relative px-3 py-2 text-sm font-medium max-w-md text-slate-800 border border-slate-200 rounded-md">
  <input type="checkbox" id="toggle" class="peer/toggle hidden">
  <label for="toggle" class="inline-block absolute px-2 py-0.5 text-xs font-medium text-slate-800 bg-white border border-slate-200 rounded-sm ring ring-2 ring-offset-0 ring-white/60 z-10 translate-x-1/2 cursor-pointer hover:border-slate-300 peer-checked/toggle:hidden">
    Click to Reveal
  </label>

  <span class="block select-all blur-[3px] peer-checked/toggle:blur-none">
    sk_test_4eC39HqLyjWDarjtT1zdp7dc
  </span>
</fieldset>

That “magic” here is the peer modifier that I covered before already. It’s one of those little features you easily forget about and might reach for a small Stimulus controller or similar instead. The peer modifier allows for styling elements based on the state of a sibling element. Like in this case, the hidden checkbox controls both the visibility of the “Click to Reveal” button and the blur effect on the API key.

The peer/toggle class on the checkbox marks it as a peer element and peer-checked/toggle:hidden on the label hides it when the checkbox is checked. Similarly, peer-checked/toggle:blur-none removes the blur effect from the API key when the checkbox is checked.