JSFiddle - React, Tailwind, and code Playground

by Nate

HTML

<header id="blogs-sources">
  <a href="../blog/" class="flex-container">
    <span class="inline-cmd">cd ~/blog/</span>
    <span class="disp-text">Featured</span>
  </a>
  <a href="../blog/tech/" class="flex-container">
    <span class="inline-cmd">cd ~/blog/tech/</span>
    <span class="disp-text">Tech</span>
  </a>
  <a href="../blog/personal/" class="flex-container">
    <span class="inline-cmd">cd ~/blog/personal/</span>
    <span class="disp-text">Personal</span>
  </a>
</header>

CSS

* { padding: 0; margin: 0; font-family: sans-serif; }

#parent-flex {
  display: flex;
  flex-direction: column;
  border: 2px solid blue;
}

.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5em; 
  min-height: 2em;
  
  border: 2px solid red;
  color: #333;
  text-decoration: none;
}
.flex-container:hover > .disp-text { display: none; }
.flex-container:hover > .inline-cmd { display: inline; }

.disp-text {
  border: 2px solid black;
}

.inline-cmd {
  display: none;
  font-style: normal;
  font-family: monospace;
  border: 2px solid black;
}