JSFiddle - React, Tailwind, and code Playground

by mcat12

HTML

<body>
  <h2>
    Options for the <span class="code">
		display</span> property
  </h2>
  <div id="container">
    <p>
      display:block (boxes stack on top of each other, like paragraphs on a page)
    </p>
    <ul id="displayblock">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <br>
    <p>
      display:flex (boxes line up next to each other, like words on a page)
    </p>
    <ul id="displayflex">
      <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;
}

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

}

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

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

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

#displayblock {
  display: block;
}

#displayflex {
  display: flex;
}