JSFiddle - React, Tailwind, and code Playground
HTML
<div class="latest">
<div class="games">
<img src="img/code.jpg">
<h4>First Div</h4>
<span>SHORT PARAGRAPH</span>
<br>
<a href="projects.html#latest" target="_blank">Learn More</a>
</div>
<div class="sites">
<img src="img/code.jpg">
<h4>Second div</h4>
<span>Bigger paragraph Bigger paragraph Bigger paragraph Bigger paragraph Bigger paragraph Bigger paragraph Bigger paragraph Bigger paragraph Bigger paragraph Bigger paragraph Bigger paragraph Bigger paragraph Bigger paragraph Bigger paragraph Bigger paragraph </span>
<br>
<a href="#" target="_blank">Currently in Development</a>
</div>
CSS
.latest h4 {
font-size: 40px;
}
.latest div {
border: 2px solid black;
display: inline-block;
padding: 2px;
width: 370px;
transition: 0.3s;
-o-transition: 0.3s;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
}
.latest div {
padding: 10px;
}
.latest div:hover {
}
.latest div:hover img {
border-radius: 30px;
}
.latest img {
width: 350px;
transition: 0.3s;
-o-transition: 0.3s;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
margin-left: 10px;
}
#main .latest div h4 {
font-size: 27px;
transition: 0.4s;
-o-transition: 0.4s;
-moz-transition: 0.4s;
-webkit-transition: 0.4s;
padding: 0px;
}
.latest div:hover h4 {
}
.latest div p {
width: 370px;
padding-bottom: 0px;
transition: 0.3s;
-o-transition: 0.3s;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
}
.latest div:hover p {
}
.latest div:hover a {
opacity: 1;
}
.latest a {
border: 2px solid black;
padding: 9px;
border-radius: 9px;
text-decoration: none;
color: black;
text-transform: uppercase;
transition: 0.3s;
-o-transition: 0.3s;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
font-family:;
display: block;
opacity: 0;
}
.latest a:hover {
background-color: gray;
color: white;
}