JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<section name="parent" class='edit'>
    <h1>Parent Section</h1>
    <article name="child" class='edit'>
        <h2>Child Article</h2>
        <div name="somecontent" class='edit'>
             <h3>Child Div</h3>
             <span class="edit">
                <a class="edit-link" href="#div">Edit</a>
            </span>
        </div> 
        <span class="edit-link"><a class="edit-link" href="#article">Edit</a></span>
    </article> 
    <span class="edit-link"><a class="edit-link" href="#section">Edit</a></span>
</section>

CSS

article{
    width:70%;
}
article div{
    width:50%;
    margin-left:50%;
}
span.edit-link{
	position: relative;
	float: right;
	width:100%;
	height:0px;
}
a.edit-link{
	position:absolute;
	right: 0px;
	bottom: 0px;
	display: none;
}
.edit:hover {
    border-style:solid;
    border-width:1px;
}
.edit:hover > span.edit-link a.edit-link {
    display: inline;
}