JSFiddle - React, Tailwind, and code Playground

by Drew Christensen

HTML

<h1>
  Weekly specials
</h1>
<div class="flex row">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
  </nav>
  <main class="flex row grow justify-between align-stretch">
    <div class="border padding grow">
      <h2>
        Description of specials
      </h2>
      <p>
        Filler text here
      </p>
    </div>
    <div class="flex column align-stretch">
      <div class="border no-v-margin padding">
        Image 1
      </div>
      <div class="border no-v-margin padding">
        Image 2
      </div>
      <div class="border no-v-margin padding">
        Image 3
      </div>
    </div>
  </main>
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
}
.flex {
  display: flex;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.align-stretch {
  align-items: stretch;
}
.align-start {
  align-items: flex-start;
}
.grow {
  flex-grow: 1;
}
.row {
  flex-flow: row nowrap;
}
.column {
  flex-flow: column nowrap;
}
.border {
  border: 1px solid black;
  margin: 5px;
}
.padding {
  padding: 5px;
}
.no-v-margin {
  margin-top: 0px;
  margin-bottom: 0px;
}
nav ul {
  list-style-type: none;
}
nav li {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
}
table {
  border-collapse: collapse;
}
table, table td {
  border: 1px solid black;
}