JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang="en">
<head>
<title>Rafael Caba</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
</head>

<body>

<header class="main_header">
<div class="header_wrapper">
<p class="main_title"><a href="index.html">Rafael Caba</a></p>
	<nav class="main_nav">
		<ul>
			<li><a href="index.html">Portfolio</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</nav>
	</div>
</header> <!-- end of header -->

<div class="container">

<section class="main_content">
	<article id="thumbnail_1">
		<div class="imgwrap">
		 <a href=""><img...

CSS

*{
	margin:0;
	padding:0;
	list-style-type:none;
}

header,nav,section,article,aside,footer{
	display:block;
}

.container{
	width:960px;
	margin:0 auto;
}

.main_title{
	float:left;
	padding:20px;
	font-size:35px;
	font-family: 'Source Sans Pro', sans-serif;
}

.main_title a{
	text-decoration:none;
	color:#ffffff;
}

.main_header{
	background-color:#000000;
	color:#ffffff;
	width:100%;
	height:80px;
}

.header_wrapper{
	width:960px;
	margin:0 auto;
}

.main_nav{
	float:left;
	margin-left:400px;
}

.main_nav ul li{
	float:left;
	padding:35px 10px;
}

.main_nav ul li a{
	text-decoration:none;
	color:#ffffff;
	font-family:myriad pro;
}

.main_nav a:hover{
	color:#ccc;
}

.main_content{
	width:960px;
	height:800px;
}

.main_content article{
	width:260px;
	height:200px;
	margin:30px;
	float:left;
}

.about_content{
	width:960px;
	height:800px;
}

.about_content article{
	margin:30px;
	width:500px;
}

.about_title{
	font-size:30px;
	margin-bottom:40px;
	font-family:myriad pro;
}

.about_name{
	font-size:20px;
	font-weight:bold;
	font-family:myriad pro;
}

.contact_content{
	width:960px;
	height:800px;
}

.contact_content article{
	margin:30px;
	width:500px;
}

.contact_title{
	font-size:30px;
	margin-bottom:40px;
	font-family:myriad pro;
}

.about_webdev{
	font-family:arial;
}

.about_email{
	font-family:arial;
}

footer{
	width:100%;
	background-color:#000000;
	color:#ffffff;
	height:80px;	
}

footer ul li{
	float:left;
	padding:30px 10px;
}

footer ul li a{
	text-decoration:none;
	color:#ffffff;
	font-family:myriad pro;	
}

footer a:hover{
	color:#ccc;
}

.footer_wrapper{
	width:240px;
	margin:0 auto;
}

span{
	font-weight:bold;
}



/*
#thumbnail_1:hover{
	background-color:red;
	
}

#thumbnail_1:hover img{
visibility:hidden;
}

#thumbnail_1  p{
	display:none;
}

#thumbnail_1:hover...