JSFiddle - React, Tailwind, and code Playground

by Alma Grace

HTML

<div class="header">
		<h1>ALMA GRACE</h1>
		<h3>Favourite Recipes</h2>
	</div>

	<div class="main-content">
		<div class="col-left">
		<p>I love cooking and I enjoy trying new recipes. My family and friends love my food. This website is dedicated to home cooks who share the same passion that I have.</p>
			<p>The recipes in my web page are my favourites: breakfast, lunch and dinner. The recipes are easy. Try them. I hope you will enjoy it as much as I do. Have fun!</p>
		
		<div class="col-one">	
			<h4>Lasagna</h4>
			<p>Ricotta, assorted meats, mozzarella cheese, tomato sauce and tender pasta baked in the oven. 
			<a href="http://allrecipes.com/Recipe/Worlds-Best-Lasagna/Detail.aspx?event8=1&prop24=SR_Thumb&e11=lasagna&e8=Quick%20Search&event10=1&e7=Recipe%20Hub" target="_blank">World's Best Lasagna</a>
			</p>
		</div>
		
		<div class="col-two">
			<h4>Seafood Soup</h4>
			<p>The ultimate seafood soup with fish (halibut, snapper, bass and/or grouper), shellfish, shrimp and lobster. 
			<a href="http://www.foodnetwork.com/recipes/tyler-florence/the-ultimate-sea-food-soup-recipe.html" target="_blank">Ultimate Seafood Soup</a>
			</p>
		</div>

		<div class="col-three">		
			<h4>Chicken Souvlaki</h4>
			<p>This recipe features the fresh-tasting combination of lemon juice, garlic, and olive oil that is so prevalent in Greek cuisine.
			<a href="http://allrecipes.com/Recipe/Chicken-Souvlaki-with-Tzatziki-Sauce/Detail.aspx?event8=1&prop24=SR_Thumb&e11=chicken%20souvlaki&e8=Quick%20Search&event10=1&e7=Recipe%20Hub" target="_blank">Chicken Souvlaki</a>
			</p>		
		</div>

		<div class="col-four">	
			<h4>Spinach Pom Salad</h4>

			<p>A very quick and nutritious salad made with spinach, pomegranate seeds, feta cheese and vinegarette dressing.
			<a href="http://allrecipes.com/Recipe/Spinach-Pomegranate-Salad/Detail.aspx?event8=1&prop24=SR_Title&e11=pomegranate%20salas&e8=Quick%20Search&event10=1&e7=Recipe" target="_blank">Spinach Pomegranate...

CSS

body{

	background: url("http://www.prlog.org/11598193-granite-kitchen-countertop.jpg");
	margin: auto;
	width: 680px;
	font-family: 'Arial', sans serif;
	color: #000;
}
p{
	line-height: 20px;
	color: #000;
}
a{
	color: #e25d33;
	font-size: 14px;
}
a:hover{
	font-color: #000088;
}

a:visited { 

	text-decoration: none;
	color: #990099;
}

a:focus { 
	text-decoration: none;
	color: #000088;	
	border-bottom-style: solid;
}

.header{
	margin: 20px 0 20px 0;
	background-color: #ffffff;
	padding: 15px ;
	color: #000000;
}
.header img{
	float: left;
	width:120px;
	margin: 10px 20px 0 0 ;
}

h1{
	font-family: Arial, cursive;
	font-size: 2em;
	color: #000;
	margin: 0;
}

h3{
	font-family: Arial, cursive;
	font-size: 1.5em;
	color: #000088;
}

h2,h4{
	color: #000000;
}

h5{
	font-family: Arial, cursive;
	font-size: 1em;
	color: #000;
}

/*
li{margin-bottom: 20px;
font-size: 14px;
}
*/
.main-content{
	padding: 15px;
	overflow:hidden;
}

.main-content img{
	width:600px;
}

.col-left{
	padding: 5px 5px 10px 10px;
	background-color: #ffffff;

	width:650px;
	float:left;
	margin-right: 40px;
}


.col-one img{
	width:200px;
}

.col-two img{
	width:200px;
}

.col-three img{
	width:200px;
}

.col-four img{
	width:200px;
}

.col-five img{
	width:200px;
}

.col-six img{
	width:200px;
}

.col-one{
	padding: 5px 10px 5px 5px;
	background-color: #fff;
	width:200px;
	float:left;

}

.col-two{
	padding: 5px 10px 5px 5px;
	background-color: #fff;
	width:200px;
	float:left;

}

.col-three{
	padding: 5px 10px 5px 5px;
	background-color: #fff;
	width:200px;
	float:left;

}

.col-four{
	padding: 5px 10px 5px 5px;
	background-color: #fff;
	width:200px;
	float:left;

}

.col-five{
	padding: 5px 10px 5px 5px;
	background-color: #fff;
	width:200px;
	float:left;

}

.col-six{
	padding: 5px 10px 5px 5px;
	background-color: #fff;
	width:200px;
	float:left;

}

.footer {
	background-color: #ffffff;
	text-align: center;
	padding: 10px;
	margin-top: 15px;
	color: #fff;
}