JSFiddle - React, Tailwind, and code Playground
HTML
<div class="project_box">
<div class="img_wrapper">
<img src="images/C.png" class="project_image">
</div>
<span class="proj_title">Centill</span>
<span class="about_the_project">asaasjiasojasjoisaiojsaijasiojsaiojasiojasi</span>
<a href="http://centill.com/" target="_blank" class="project_link">Link</a>
</div>
<div class="project_box">
<div class="img_wrapper">
<img src="images/C.png" class="project_image">
</div>
<span class="proj_title">Centill</span>
<span class="about_the_project">asaasjiasojasjoisaiojsaijasiojsaiojasiojasiasaasjiasojasjoisaiojsaijasiojsaiojasiojasiasaasjiasojasjoisaiojsaijasiojsaiojasiojasiasaasjiasojasjoisaiojsaijasiojsaiojasiojasiasaasjiasojasjoisaiojsaijasiojsaiojasiojasi</span>
<a href="http://centill.com/" target="_blank" class="project_link">Link</a>
</div>
CSS
.project_box{
display: inline-block;
width: 481px;
height: 600px;
margin-left: 30px;
}
.project_image{
width: 161px;
}
.about_the_project{
font-size: 27px;
font-family: Roboto;
color: gray;
padding: 10px;
text-align: center;
width: 100%;
position: relative;
top: 10px;
word-wrap: break-word;
line-height: 37px;
display: block;
}
.img_wrapper{
width: 581px;
height: 100px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.project_link{
width: 200px;
font-size: 27px;
color: gray;
font-family: Roboto;
background: #03a9f4;
border:0;
cursor: pointer;
display: block;
margin: 0 auto;
top: 20px;
position: relative;
-webkit-transition:.25s;
-moz-transition:.25s;
-ms-transition:.25s;
-o-transition:.25s;
transition:.25s;
text-align: center;
height: 38px;
}
.Projects{
width: 100%;
height: 100%;
position: relative;
top: 70px;
-webkit-transition:.25s;
-moz-transition:.25s;
-ms-transition:.25s;
-o-transition:.25s;
transition:.25s;
margin: 0 auto;
}
.proj_title{
color: gray;
font-size: 43px;
text-align: center;
font-family: Roboto;
width: 100%;
display: inline-block;
position: relative;
top: 10px;
}