JSFiddle - React, Tailwind, and code Playground

by beau

HTML

<header class="banner" role="banner">
  <h1>
    <a href="/" title="Casey's Pizza">Casey's<br/><span class="smaller">Pizza<span></a>
  </h1>
  <p>Old World Pies Reinvented</p>
</header>
<div class="main" role="main">
  <h2> Whole Pies</h2>
  <ul>
    <li class="product">
      <h3 class="item-name">margherita</h3>
      <p class="price">13</p>
      <p class="description">tomato, aged mozzarella, fior de latte, grana padano basil, extra virgin olive oil</p>
    </li>
    <li class="product">
      <h3 class="item-name">funghi</h3>
      <p class="price">13</p>
      <p class="description">tomato, aged mozzarella, fior de latte, grana padano basil, extra virgin olive oil</p>
    </li>
    <li class="product">
      <h3 class="item-name">slices - 1/4 pie</h3>
      <p class="price">4</p>
      <p class="description">choose from any available slice pie</p>
    </li>
  </ul>
</div>
<footer class="contentinfo vcard" role="contentinfo">
<p><a href="caseyspizzas.com" title="caseyspizzas.com" class="fn url">caseyspizzas.com</a><br/>
<span class="twitter">twitter: <a href="http://twitter.com/caseyspizza">@caseyspizza</a><span><br/>
call your order in: <span class="tel">650-395-8494</span></p>
</footer>

SCSS

body {
  font-family: "HelveticaNeue", helvetica, Arial, sans-serif;
}
.banner {
  text-align: right;
  a {
    display: block;
    width: 100%;
    font-size: 2.5em;
    line-height: .8;
    font-weight: 900;
    letter-spacing: -0.025em;
    text-transform: lowercase;
  }
  .smaller {
    font-size: .9em;
  }
  p {
    text-transform: lowercase;
    line-height: 2;
  }
}
h2, .item-name, .price, .description {
  text-transform: lowercase;
}
h2 {
  font-size: .8em;
}
ul {
  list-style: none;
  margin: 0; 
  padding-left: 0;
}
.product {
  position: relative;
  margin-bottom: 1.5em;
}
.price {
  position: absolute;
  top: 0px;
  right: 0;
}
.description {
  font-size: .9em;
}

footer {
  text-align: right;
}