JSFiddle - React, Tailwind, and code Playground

by Alma Grace

HTML

<div class="header">
    <img src="http://www.clker.com/cliparts/E/W/P/P/y/f/barbecue-utensils-hi.png" alt="chef logo" />
    	<h1>ALMA GRACE</h1>

    	<h3>Favourite Recipes</h2>
	</div>

	<div id="main-content">
		<div class="col-recipe">
			<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>
			<img src="http://images.media-allrecipes.com/userphotos/250x250/00/03/24/32427.jpg" alt="Lasagna" /> 
			<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>
			<img src="http://awetthai.com/wp-content/uploads/2013/12/tom-yum-seafood-soup-awet-thai.jpg" alt="Seafood Soup" /> 
			<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>
			<img id="chicken" src="http://images.media-allrecipes.com/userphotos/250x250/00/23/09/230908.jpg" alt="Chicken Souvlaki" /> 
			<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"...

CSS

body {
    background: url("http://www.prlog.org/11598193-granite-kitchen-countertop.jpg");
    margin: auto;
    width: 690px;
    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;
    text-shadow:0px 0px 2px #FFFFFF, 2px 2px 2px #333333;
    box-shadow: 5px 5px 5px #330000;
    opacity: 0.9;
}
.header img {
    float: left;
    width:170px;
    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;
    text-shadow:0px 0px 2px #FFFFFF, 2px 2px 2px #333333;
}
h5 {
    font-family: Arial, cursive;
    font-size: 1em;
    color: #000;
}
#main-content {
    padding: 15px;
    overflow:hidden;
    opacity: 0.9;
}
.col-recipe {
    padding: 5px 5px 10px 10px;
    background-color: #ffffff;
    width:650px;
    float:left;
    margin-right: 40px;
}
#main-content img {
    width:190px;
    height: 142px;
    box-shadow: 1px 1px 5px #330000;
    border-radius: 5px 5px 5px 5px;
}
.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-links {
    padding: 10px 0px 30px 10px;
    background-color: #ffffff;
    margin-left: 0px;
    float:left;
    color: #000000;
    opacity: 0.8;
    box-shadow: 1px 1px 5px #330000;
    width: 635px;
}
#col-links p {
   ...

JavaScript

document.getElementById("p1").innerHTML="I love cooking and I enjoy trying new recipes. My family and friends love my food. This website is dedicated to ALL home cooks who share the same passion that I have.";

document.getElementById("subtitle").innerHTML="Yummy Recipes";

document.getElementById("chicken").src="http://simplyfreshcooking.com/wp-content/uploads/2012/04/Roasted-Chicken3.jpg";