JSFiddle - React, Tailwind, and code Playground

by Joshua Powell

HTML

<div class="messageContent">
    <span class="overlay"></span>
    <p>Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.</p>
    <a href="#">This is a link</a>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

.messageContent {
    color: #000;
    position: relative;
    height: 100%;
    width: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: lightBlue;
    opacity: 0;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 100;
}

.messageContent:hover .overlay {
    opacity: 0.6;
}