JSFiddle - React, Tailwind, and code Playground

casey's pizza

by beau

HTML

<div class="container">
  <article>
    <header>
      <h1>Casey's <span>Pizza</span></h1>
      <h2>Old World Pies Reinvented</h2>
    </header>
    
    <div class="content">
      <h3 class="content-title">Whole Pies</h3>
      <ul class="menu-list">
        <li class="menu-item">
          <h4>Margherita</h4>
          <p>tomate, aged mozzarella, fior di latte, grana padano, basil, extra virgin olive oil</p>
          <span class="price"><span>$</span>13</span>
        </li>
        <li class="menu-item">
          <h4>Funghi</h4>
          <p>tomate, aged mozzarella, fior di latte, grana padano, basil, extra virgin olive oil</p>
          <span class="price"><span>$</span>15</span>
        </li>
        <li class="menu-item">
          <h4>Margherita</h4>
          <p>tomate, aged mozzarella, fior di latte, grana padano, basil, extra virgin olive oil</p>
          <span class="price"><span>$</span>15</span>
        </li>
      </ul>
    </div>
    <footer>
      <p class="company-url">caseyspizza.com</p>
      <p class="contact">twitter: @caseyspizza<br />
      call your order in: 650-395-8494</p>
      </p>
    </footer>
  </article>
</div>

SCSS

$font_size = 16px;
$line_height = 1.5;


body{  
  font-size: $font_size;
  line-height: $line_height;
  font-family: Helvetica, Arial, sans-serif;
}
.container{
  margin: 0 auto;
  width: 80%;   
}
header h1,
footer .company-url{
  font-family: Impact, "Impact Std", Helvetica, Arial, sans-serif;
}
header{
  text-align: right;

  h1{
    font-size: 30px;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    
    span{
      display: block;
      font-size: 20px;
    }
  }
  h2{
    font-size: $font_size;
    margin: 0;
  }
}
.menu-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.content-title{
  font-size: $font_size;
}

.menu-item{
  margin: 0 0 2em;
  padding: 0;
  position: relative;

  .price{
    position: absolute;
    top: 0;
    right: 0;
  }
  h4{
    font-size: $font_size + 1;
    margin: 0;
    text-transform: lowercase;
  }
  p{
    margin: 0;
  }
  
}