JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<div class="preformatted">

  Please procure the following items:

    - Soup
    - Jam
    - Hyphens 
    - Cantaloupe
</div>
<div class="preformatted wrapped">

  Please procure the following items:

    - Soup
    - Jam
    - Hyphens
    - Cantaloupe
</div>

CSS

.preformatted {
    width: 120px;
    font-family: monospace;
    white-space: pre;
    background-color: #ddd;
    margin: 1em;
}

.preformatted.wrapped {
    white-space: pre-wrap;
}