JSFiddle - React, Tailwind, and code Playground

by elpakks

HTML

<title>Sweet Potato Recipe</title>

	<body>
	
		<h1>Sweet Potato Recipe</h1>
<pre>
Large Sweet Potato Casserole
Prep Time: 
Cook Time:
20 Servings
</pre>
		
		
		<h2 class="myheader">Ingedients</h2>
		
		<h3 class="myheader">Filling</h3>
			<ul>
				<li>3 cups mashed sweet potatoes</li>
				<li>1 cup sugar</li>
				<li>1/2 cup melted butter</li>
				<li>2 eggs, beaten</li>
                <li>1 <abbr title="teaspoon">tsp.</abbr> vanilla extract</li>
				<li>1/2 cup milk</li>
				<li>1/2 cup milk</li>
		</ul>
		
		
		<h3 class="myheader">Topping</h3>
		<ul>
			<li>1 cup brown sugar</li>
			<li>1/2 cup all-purpose flour</li>
			<li>1/3 cup melted butter</li>
			<li>1 cup chopped pecans</li>
		</ul>
		
		
			<hr />	
			

		<h2 class="myheader">Instructions</h2>

	
		
		Preheat the oven to 350 degrees F.
		<div class="upperromanlist">
		<ol>
			<li>Filling:
			<ol>
			<div class="lowerromanlist">
					<li>In a large bowl combine all the filling ingredients.</li>
					<li>Transfer to a buttered 1 1/2 quart casserole dish.</li>	
			</div>	
			</ol>
			
			</li>
			
		<li>Topping:

		<ol>
			<div class="lowerromanlist">
			<li>In a medium bowl combine the brown sugar, flour, and butter until moist and the mixture clumps together.</li>
			<li> Stir in the pecans and spread over the top of the sweet potatoes in an even layer.</li> 
			<li>Bake until the top is golden, about 25 to 30 minutes. Remove from the oven and serve hot.</li>
		</div>
		</ol>
	</li>
	</ol>
</div>
		<hr />	
	

		<h4 class ="header">Notes:</h5>
			<p>Make sure to ask your Thanksgiving guests if they have an allergy to pecans!</p>
			
			<p>Consider making some of it without the pecans in the topping</p>
        
        <p>Click <a href="http://www.canadianliving.com/recipe-directory/holiday_and_special_events/thanksgiving.php" title="here">here</a> for more Thanksgiving recipes:</p>
				
	</body>
	
	
<!--MAKE THIS COPYRIGHT SYMBOL PROPERLY-->	
	<div id="copyright_footer">Copyright©2014 CISC 282 All...

CSS

h1 {
background-color: #D80000;
font-size: 2em; 
color: white;
text-align: center;
}

h2, h3{
color: black;
background-color: orange;		
}

.lowerromanlist li {list-style-type: lower-roman;}
.upperromanlist ol {list-style-type: upper-roman;}

.myheader {
text-align: left;
text-decoration: underline;	
font-weight: bold;	
}

a {
text-decoration: none;   
color: #000099;
font-weight: bold;	   
}

abbr {color: blue;}