JSFiddle - React, Tailwind, and code Playground

by Karel Jed Darang

HTML

<img class="image" src="https://d2gk7xgygi98cy.cloudfront.net/5643-3-large.jpg"/>

<div class="description">
<h1>Bread</h1>
<p>Making your own bread needs a little hard work but it's great fun and the delicious smell and taste of freshly baked bread makes it all worth while. You can make a white or wholemeal loaf from this recipe depending on which flour you use.</p>
</div>


<h2>Ingredients</h2>
<div id="ingredients">

<ul>
     <li>1/2 Flour</li>
     <li>1 level teaspoon salt</li>
     <li>1 level teaspoon sugar</li>
     <li>Margerine</li>
     <li>1 sachet of dried yeast</li>
     <li>150ml cup of water</li>
  </ul>
</div>

<h3>Method</h3>
<div id="method">
  <ol>
      <li>Put the flour in the mixing bowl and add the sugar and the salt.</li>
      <li>Add the margarine and rub into the flour using your finger tips.</li>
      <li>Add the dried yeast and stir into the flour mix</li>
      <li>Add all the water at once to the flour mix and stir together using the wooden spoon</li>
      <li>Use your hands as the dough gets tough and when it leaves the sides of the bowl clean (add a little more flour if it is too sticky), put the dough onto a floured surface.</li>
      <li>Now the hard work! The dough will feel tight and lumpy and you must 'knead' it to make it smooth and stretchy. Push your hands into the dough, gather it back into a ball, turn it slightly and then     repeat. Do this for about 5 minutes until the dough feels smooth.</li>
      <li>Shape the dough into your own design or use one of the ideas below and place it on the greased baking tray.</li>
  </ol>
</div>

<h4>References</h4>
<p2>Recipe provided from <a ref="https://www.botham.co.uk/seed/bread1.htm">Botham</a></p2>

CSS

body {
  background-color:white;
}

ul, ol {
  background-color:silver;
}

.image {
  width:20%;
  float:left
}

.description {
  float:left;
  width:75%;
  padding-left:5%;
}

a:link {
  color:blue;
}