JSFiddle - React, Tailwind, and code Playground

by alansalexer

HTML

<div id="wrapper">
    <div id="innerprjctwrap">
        <div class="prjctwrap">
<a href="http://www.google.com">
<div class="imageCont" style="background-image:url(image1.jpg);">
</div>
<div class="text">Text Text Text</div> </a> 
        </div><div class="prjctwrap">
<a href="http://www.google.com">
<div class="imageCont" style="background-image:url(image1.jpg);">
</div>
<div class="text">Text Text Text</div> </a> 
        </div><div class="prjctwrap">
<a href="http://www.google.com">
<div class="imageCont" style="background-image:url(image1.jpg);">
</div>
<div class="text">Text Text Text</div> </a> 
        </div></div>
</div>

CSS

#wrapper {
    background-color: #FFFFFF;
    width:100%;
    height:1000px;
}
.prjctwrap {
    display:inline-block;
    width: 130px;
    height:180px;
    overflow:hidden;
    margin:15px;
}
.prjctwrap .imageCont {
    width: 130px;
    height: 100px;
    background-size: cover;
}
.prjctwrap .text {
    text-align: center;
    color: black;
    text-decoration: none;
    height:80px;
}
.prjctwrap a {
    text-decoration:none;
}
#innerprjctwrap {
    margin:0px auto;
    text-align:center;
}