JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
    <div> <a href="index.html"><img src="http://www.w3schools.com/images/pulpit.jpg"></a>
        <section>
            <p>Loai Bassam</p> 
            <a href="#">View Project</a>
        </section>
    </div>
</div>

CSS

.grid {
    display: inline-block;
    width: 330px;
    height: 330px;
}
div {
    margin: 5px;
    position: relative;
}
div section {
    color: #FFFFFF;
    background-color: #456087;
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity:0.3;
    filter:alpha(opacity=30%);
}
div section p, a {
    color: #FFFFFF;
}
div img {
    width: 100%;
    height: 100%;
}