JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      * {
        box-sizing: border-box;
      }

      .col {
        float: left;
        width: 33.33%;
        padding: 10px;
        height: 300px;
      }

.innercol {
        position: absolute;
        width: 33.33%;
        padding: 10px;
        height: 300px;
        right: 8px;
        top: 8px;
      }


      a {
        color: cyan
      }

      ;

      .row:after {
        content: "";
        display: flex;
        clear: both;
      }

      .google,
      .yahoo {
        background: blue;
        color: black;
        z-index:0;
      }

      .text {
        background: yellow;
      }

      .text div {
        display: none;
      }

     .google a:hover+ .text .google-text, .google-sec {
        display: flex;
        z-index:2;
      }
     .yahoo a:hover+ .text .yahoo-text, .yahoo-sec {
        display: flex;
        z-index:1;
      }

    </style>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col google">
          <a href="https://google.com">Google</a>
          <div class="innercol text google-sec">
            <div class="google-text">I love Google</div>
          </div>
        </div>

        <div class="col yahoo">
          <a href="https://google.com">Googlev2</a>
                    <div class="innercol text yahoo-sec">
            <div class="yahoo-text">I love Yahoo</div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>