JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <a href="PP 20062014 Creating This Website.html">
        <div id="project1">
            <h4>This Website</h4>
            <img src="https://www.google.com/images/srpr/logo11w.png" width="50%"</img><p></p>
                <p>My first ever website</p>
        </div>
    </a>
</div>

CSS

.container {
	text-align: center;
}

.container h4 {
	text-align: center;
	color: black;
}

#project1 {
	text-align: center;
	color: white;
	background-color: white;
	background-color: rgba(255,255,255,0.9);
	color: black;
}

#project1:hover {
	background-color: blue;
	color: white;
}

#project1:hover h4 {
	color: white;
}

#project1 h4 {
	text-transform: uppercase;
}

a {
    text-decoration: none;
}