JSFiddle - React, Tailwind, and code Playground

by mcat12

HTML

<body>
  <h2>
    Options for the <span class="code">flex-flow</span> property
  </h2>
  <div id="container">
    <p>flex-flow: row wrap </p>
    <ul id="row-wrap">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>flex-flow: row-reverse
    </p>
    <ul id="row-reverse">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>
      flex-flow: row-reverse wrap-reverse
    </p>
    <ul id="flex-wrap-reverse">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>

</body>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
}

.code {
  font-family: Courier New, monospace;
  font-weight: bold;
  color: blue;
}

#container {
  width: 600px;
}

p {
  font-size: 18px;
  font-family: Courier New, monospace;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  border: 3px solid blue;
  display: flex;
}

li {
  border: 3px solid orange;
  background-color: orange;
  font-weight: bold;
  margin: 1em;
  padding: 1em;
  width: 70px;
  text-align: center;
}

#row-wrap {
  flex-flow: row wrap;
}

#row-reverse {
  flex-flow: row-reverse;
}

#flex-wrap-reverse {
  flex-flow: row-reverse wrap-reverse;
}