In the early days of CSS, we relied heavily on custom styles for everything, resulting in large, messy stylesheets. Then came utility-first CSS, which offered a way to build more efficiently by applying small, reusable classes directly to HTML.

But the real turning point for utility-first CSS came with the widespread adoption of Flexbox. Flexbox made it incredibly easy to handle layouts, alignment, and spacing with just a few utility classes. Suddenly, tasks that required dozens of lines of CSS could be achieved with a handful of utilities.

This shift towards Flexbox and utility-first CSS encouraged a more component-driven approach. Instead of writing custom styles for every element, we could create fully reusable, consistent components—cards, buttons, sliders—using utilities.

The final push that cemented this approach came with Figma’s adoption of Flexbox for layout positioning. Now, we can design our components in Figma using Flexbox settings, then translate those designs to the web with 100% accuracy using utility classes. The design-to-code workflow has never been smoother.

Today, our process focuses on using utility-first CSS for the foundation of our components, with custom styles reserved for the occasional unique requirement. This balance keeps our CSS small, consistent, and easy to maintain.

GitHub react-syntax-highlighter AVAILABLE_LANGUAGES_PRISM.MD

wrap your code in three back ticks like:

```javascript

Your JavaScript code...

```

Example:

<figure>
  <video controls width="320" height="240">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <figcaption>Video Caption</figcaption>
</figure>

The figure tag adds more meaning semantics to the HTML document when compared to the image tag.

According to to the Free Code Camp forum we should be keeping the figcaption with the figure tag even if we are not using it.

The CSS property white-space controls how whitespace and line breaks within an element are displayed. The default value for white-space is normal, which collapses multiple spaces and line breaks into a single space and wraps text as needed.

In this mode, multiple spaces and line breaks are treated as a single space.

CSS Tricks has a complete guide to white-space

The first easiest option is to simply style the element you're inserting the text into with the following CSS property:

white-space: pre-wrap;