JSFiddle - React, Tailwind, and code Playground

by Taqi_Shah

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Chapter 3: Background images</title>
    <link rel="stylesheet" href="background2.css" />
</head>
<body>
    <div class="wrapper">
        <div class="recipe">
        <h1>Baked Garlic</h1>
        
        <p>Garlic may be known for being a little bit stinky, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.</p>
        
        <p>To make your own baked garlic, you will need:</p>
        
        <ul class="ingredients">
            <li>Whole heads of garlic</li>
            <li>Salt</li>
            <li>Olive Oil</li>
            <li>Foil</li>
        </ul>
        
        <h2 class="instructions">Instructions</h2>
        
        <ol>
            <li>Cut the tops and bottoms off the garlic heads with a sharp knife, keeping the head intact, then snip the tops of the cloves so you can see the garlic inside.</li>
            <li>In a large ovenproof dish use foil to make a 'nest' large enough to hold all of your garlic. If you are doing a lot of garlic you could put them into several nests.</li>
            <li>Add a few tablespoons of water to the nest then add the garlic heads.</li>
            <li>Pour over a tablespoon of olive oil per garlic, season with salt and tightly wrap up the top of the foil nest to seal in the garlic.</li>
            <li>Bake for 30 minutes at 200C, open the nest and baste the garlic in the juices, then cover and bake for another 30 minutes.</li>
            <li>Enjoy!</li>
        </ol>
        
        <a class="more" href="#">More recipes</a>
        </div>
    </div>
</body>
</html>

CSS

body {
  background-color: #333;
  background-image: url(brushed_alu_dark.png);
  color: #fff;
  margin: 0;
  padding: 0;
  font: 0.75em/1.3 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
}

.wrapper {
  width: 80%;
  margin: 20px auto 40px auto;
  background-color: #fff;
  color: #333;
  background-image: url(brushed_alu.png);
}

.recipe {
  padding: 1em;
}

h1 {
  font-size: 150%;
}

h2 {
  font-size: 125%;
}

h2.instructions {
  background-image: url(instructions.png);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 30px;
} 

ul.ingredients {
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  list-style: none;
  margin: 1em 0 1em 0;
  padding: 1em 0 1em 30px;
  background-image: url(ingredients.png);
  background-repeat: no-repeat;
  background-position: 0 1em;
}

a.more:link, a.more:visited {
  display: block;
  padding: 0.3em 20px 0.3em 0;
  text-align: right;
  color: #666;
  font-weight: bold;
  background-image: url(arrow.png);
  background-position: right center;
  background-repeat: no-repeat;
  text-decoration: none;
}