JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" placeholder="press on me and tab two times">
<div class="ads" tabindex="0">
  <button class="close" tabindex="0">X</button>
</div>
<p>
 by the second tab you should see focused button ,but you don't
</p>

CSS

input{
  display: block;
  width: 100%;
}
.ads{
    position: relative;
    display: inline-block;
    border-radius: 0.5625rem;
    border-style: solid;
    border-width: 0.03125rem;
    border-color:  lightgrey;
    background-color:  #ffffff; 
    width: 100%;
    height: 80px;
}

.close{
      display: none; 
      padding: 0; 
      background: transparent;
      border: none; 
      margin-top: 0.5rem; 
      margin-right: 0.5rem; 
      float: right; 
      width: 0.5rem;
      height: 0.5rem;
      background-image: url('delete.png'); 
      background-size: 100% 100%;
}

div.ads:focus{
    background-color:  #ebeded;
}
div.ads:focus .close{
  display:inline-block;
}
button.close:focus{
  display:inline-block;
}