JSFiddle - React, Tailwind, and code Playground

by Kvark

HTML

<div class="items">
    <div class="item">
       <a href="#"> 
            <div class="info">
                asdf
            </div>
        </a>
    </div>
</div>
<div class="card">
	<div class="card-header">
    <div class="card-logo">
				[Logo]
    </div>
    <div class="card-name">
      Azure
    </div>
    <div class="card-controls">
      [Contrl]
    </div>
  </div>
</div>

CSS

.items {
  width: 100%;
  height: 50px;
  background-color: lime;
}
.items .item  {
    visibility: hidden;
}

.items:hover .item {
    visibility: visible;
}

.card-header {
  background-color: yellow;
}

.card-controls {
  visibility: hidden;
  background-color: red;
}

.card-header:hover .card-controls {
  visibility: visible;
}