Recipe Page (React and Tailwind CSS)

What are you most proud of, and what would you do differently next time?

I'm most proud of the styling and how close it is to the original.

What challenges did you encounter, and how did you overcome them?

The text alignment in the 'Instructions' section was challenging. By default the text was left aligned under the decimal ordered marker.

What specific areas of your project would you like help with?

I'd like help using Tailwind CSS to properly align the decimal ordered list items in the 'Instructions' section.

function Instructions() {
  return (
    
      Instructions
      
        
          Beat the eggs: In a bowl,
          beat the eggs with a pinch of salt and pepper until they are well
          mixed. You can add a tablespoon of water or milk for a fluffier
          texture.
        
        
          Heat the pan: Place a
          non-stick frying pan over medium heat and add butter or oil.
        
        
          Cook the omelette: Once
          the butter is melted and bubbling, pour in the eggs. Tilt the pan to
          ensure the eggs evenly coat the surface.
        
        
          Add fillings (optional):{' '}
          When the eggs begin to set at the edges but are still slightly runny
          in the middle, sprinkle your chosen fillings over one half of the
          omelette.
        
        
          Fold and serve: As the
          omelette continues to cook, carefully lift one edge and fold it over
          the fillings. Let it cook for another minute, then slide it onto a
          plate.
        
        
          Enjoy: Serve hot, with
          additional salt and pepper if needed.
        
      
      
    
  );
}

and custom css:

.custom-ordered-list li::marker {
  @apply text-nutmeg font-bold;
}

.custom-ordered-list {
  counter-reset: item;
  list-style: none;
  padding-left: 0;
}

.custom-ordered-list li {
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: 0.9rem;
}

.custom-ordered-list li::before {
  content: counter(item) '.';
  counter-increment: item;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  color: #8b4513;
}

.custom-ordered-list .bold-span {
  display: inline-block;
  width: rem;
}