I need to style the anchor tag to look like a rectangular tile (which I’m already doing) and when clicked on that tile/anchor tag, I need to do the following 2 things:

1. Keep it selected and highlight it with Green colour.
2. On selection or change in selection between TILE-1, TILE-2 and TILE-3, I need to fetch the value of the text in the input field.

Can someone please share any guidelines on how this can be done, please?

 const showTile = (): ReactElement => {
      <ul className="tileList">
        <li>
          <a href="#" class="tile" >
            TILE-1
          </a>
        </li>
        <li>
          <a href="#" class="tile">
            TILE-2
          </a>
        </li>
        <li>
          <a href="#" class="tile">
            TILE-3
          </a>
        </li>
      </ul>

  };
  
  const showTextBox = (): ReactElement => {
  <input type="text" value="">
  };
  
  return (<div> {showTile} {showTextBox} </div>);

ul,
li {
  list-style: none;
}

.tileList > li a {
  color: #505050;
  background-color: #f3f3f3;
  border: 1px solid #ffffff;
  padding: 10px 15px;
  font-size: 13px;
}

.tileList > li a:hover {
  background-color: #e6e6e6;
}

.tileList > li > a {
  border-radius: 4px;
}



.tile {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tileList > li {
  float: left;
}