JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<h2>Photos</h2>
<ul id="photos">
    <li>(photo of roast being marinated (step1))</li>
    <li>(photo of step 2)</li>
    <li>(photo of step 3)</li>
    <li>(photo of step 4)</li>
    <li>(photo of step 5)</li>
</ul>

<h2>Steps</h2>
<ol id="steps">
    <li>marinate roast</li>
    <li>cut roast</li>
    <li>bake for 350 degrees</li>
    <li>take out and cover with foil</li>
    <li>slice</li>
</ol>

CSS

ol, ul {margin: 1em; padding: 1em; }
ul { list-style: disc; }
ol { list-style: decimal; }
ol, ul, li { margin-left: 1em; padding-left: 1em; }
h2 { font-weight: bold; }

JavaScript

jQuery(function(){

    // What's supposed to happen when the page loads?

});