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 * {
  display: block;
}
measure{
  color: blue;
  display: inline;
}
orderNumber{
  display: inline;
  color: blue;
}
heading{
  color: blue;
}
item {
  font-style: italic;
}