JSFiddle - React, Tailwind, and code Playground
HTML
<div id="Content">
<h1>VACATIONS!</h1>
<div id="Left" class="column">
<a href="http://www.tripadvisor.com/ShowUserReviews-g150807-d184989-r3504205-Golden_Parnassus_Resort_Spa-Cancun_Yucatan_Peninsula.html" class="leftLinks" target="_blank"><img src="http://farm8.staticflickr.com/7239/7308444798_e56df16317_o.png" width="767" height="309" alt="vacations_01"></a>
<a href="http://www.tripadvisor.com/Hotel_Review-g499445-d593981-Reviews-Gran_Bahia_Principe_Coba-Akumal_Yucatan_Peninsula.html" class="leftLinks" target="_blank"><img src="http://farm8.staticflickr.com/7081/7308444830_7e010f8888_o.png" width="767" height="312" alt="vacations_02"></a>
<a href="http://www.tripadvisor.com/Hotel_Review-g150809-d1191402-Reviews-Occidental_Allegro_Cozumel-Cozumel_Yucatan_Peninsula.html" class="leftLinks" target="_blank"><img src="http://farm8.staticflickr.com/7090/7308444912_7a0635fc38_o.png" width="767" height="326" alt="vacations_03"></a>
<a href="http://www.tripadvisor.com/Hotel_Review-g150809-d184998-Reviews-Iberostar_Cozumel-Cozumel_Yucatan_Peninsula.html" class="leftLinks" target="_blank"><img src="http://farm8.staticflickr.com/7092/7308444950_18008c1f42_o.png" width="767" height="321" alt="vacations_04"></a>
<a href="http://www.tripadvisor.com/Hotel_Review-g150809-d214260-Reviews-Sabor_Cozumel_Resort_and_Spa-Cozumel_Yucatan_Peninsula.html" class="leftLinks" target="_blank"><img src="http://farm8.staticflickr.com/7082/7308445028_4e89ce2a2f_o.png" width="767" height="336" alt="vacations_05"></a>
<a href="http://www.tripadvisor.com/Hotel_Review-g317145-d151011-Reviews-Barcelo_Capella_Beach_Resort-Juan_Dolio_Dominican_Republic.html" class="leftLinks" target="_blank"><img src="http://farm8.staticflickr.com/7233/7308444990_a90e1bb6c0_o.png" width="767" height="294" alt="vacations_06"></a>
<a...
CSS
div{
/* border:1px inset gray;*/
}
h1{
font-size:80px;
text-align:center;
color:#ffffff;
margin:0;
font-family:impact;
text-shadow: 1px 1px #8b8b8b;
padding: 0;
}
#Content{
display:block;
width:90%;
height:auto;
margin:0 auto;
font-family:sans-serif;
background-image:url('http://farm9.staticflickr.com/8142/7309837222_c7a7b43970_o.png');
background-repeat:repeat-x;
background-color:#f5d8a5;
min-width:1042px;
}
body{
background-image:url('http://farm8.staticflickr.com/7238/7309867908_5be661e24e_o.jpg');
}
.column{
display:block;
float:left;
height:auto;
margin:0% 0% 0% 4%;
text-align:center;
font-size:30px;
color:#ffffff;
font-family:impact;
}
/*this controls the left column*/
#Left{
width:767px;
font-family:sans-serif;
text-align:left;
border:4px solid #cc3399;
}
a{
display:block;
}
.leftLinks{
display:block;
width:767px;
height:294px;
}
.rightLinks{
display:block;
color:#717171;
font-size:30px;
font-family:impact;
text-align:center;
text-decoration:none;
background-color:#cc3399;
border-radius:20px;
margin:126px 0px 130px 0px;
width:154px;
height:38px;
float:left;
}
a:link {
color:#ffffff;/*unvisited link*/
}
a:visited {
color:#ffffff;/*visited link*/
}
a:hover {
color:#66cc66;/*mouse over link*/
}
a:active {
color:#ffffff;/*selected link*/
}
/*guess what I do!?*/
#Right{
width:15%;
}
/*fix container div height bug*/
/*exactly what "clear" does isn't important right now
but it's good to know at least one div inside a container needs
a "clear" in order to...