JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<section class="parent">
 <p>Section text would go here</p>
  <div class="child">Share</div>
  <div class="child">Like</div>
  <div class="child">Tweet</div>
</section>

<section class="parent">
 <p>Section text would go here</p>
  <div class="child">Share</div>
  <div class="child">Like</div>
  <div class="child">Tweet</div>
</section>

<section class="parent">
 <p>Section text would go here</p>
  <div class="child">Share</div>
  <div class="child">Like</div>
  <div class="child">Tweet</div>
</section>

CSS

.parent {
    width: 400px;
    height: 100px;
    background: #fff;
    border: 2px solid #000;
    margin: 10px;
    }
.child {
    opacity: 0;
    color: #000;
    margin-left: 10px;
    float: right;
    }
.child:hover {
   opacity: 1.0;
    text-decoration: underline;
    cursor: pointer;
    }
.parent:hover > .child {
    opacity: 1.0;
    }