JSFiddle - React, Tailwind, and code Playground

by mcat12

HTML

<body>
  <div id="container">
    <h3>
      The <span class="code">flex</span> Shorthand
    </h3>
    <ul id="flex">
      <li id="item1">1 (flex: 1 100%)</li>
      <li id="item2">2 (flex: 2)</li>
      <li id="item3">3 (flex: 1)</li>
      <li id="item4">4 (flex: 1 100%)</li>
    </ul>
  </div>
</body>

CSS

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

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

#container {
	height: 200px;
}

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

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

li {
	background-color: orange;
  border: 1px solid white;
	font-weight: bold;
	font-size: 2em;
	line-height: 60px;
	margin: 0;
  padding: 0;
	text-align: center;
}


#item1 {
	flex: 1 100%;
}

#item2 {
	flex: 2;
}

#item3 {
	flex: 1;
}

#item4 {
	flex: 1 100%;
}