JSFiddle - React, Tailwind, and code Playground

by mcat12

HTML

<body>
  <h2>
    Options for the <span class="code">flex-direction</span> property
  </h2>
  <div id="container">
    <p>
      flex-direction: row (items go left to right)
    </p>
    <ul id="flex-row">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>
      flex-direction: row-reverse (items go right to left)
    </p>
    <ul id="flex-row-reverse">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>
      flex-direction: column (items in a column, ordered 1 to 6)
    </p>
    <ul id="flex-column">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>
      flex-direction: column-reverse (items in a column, but the order is reversed so the last item, number 6, is on top)
    </p>
    <ul id="flex-column-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 {
  max-width: 800px;
}

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-size: 1em;
  font-weight: bold;
  margin: 1em;
  padding: 1em;
  text-align: center;
  max-width: 400px;
}

#flex-row {
  flex-direction: row;
}

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

#flex-column {
  flex-direction: column;
}

#flex-column-reverse {
  flex-direction: column-reverse;
}