JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="test"?>
<recipe>
  <heading>Pumkin Pie</heading>
  <list>
  <heading>Ingredients</heading>
  <item>1 pumpkin</item>
  <item>1 <measure>teaspoon</measure> cinammon</item>
  <item>1 pumpkin</item>
  <item>1 <measure>teaspoon</measure> cinammon</item>
  </list>
  <list>
  <heading>Instructions</heading>
  <item><orderNumber>First</orderNumber>: stir</item>
  <item><orderNumber>Second</orderNumber>: shake</item>
  </list>
</recipe>

CSS

recipe > heading {
  font-size: 30px;
}
recipe * {
  display: block;
}
measure{
  color: red;
  display: inline;
}
orderNumber{
  font-style: italic;
  display: inline;
}
heading{
  font-weight: bold
}