JSFiddle - React, Tailwind, and code Playground

by beau

HTML

<h1>Casey's <span>Pizza</span></h1>
  <h3>old world pies reinvented</h3>

<div id="container">
  <div id="menu">

    <div class="margherita clearfix">
      <h2>Margherita</h2>
      <span class="price">13</span>
      <p>tomato, aged mozzarella, fior di latte, grana padano basil, extra virgin olive oil</p>
    </div>

    <div class="funghi">
      <h2>Funghi</h2>
      <p>crimini and shitake, thyme, garlic, aged mozzarella, fior de latte, grana padano, chili flake, extra virgin olive oil</p>
      <p class="price">13</p>
    </div>

    <div class="arugula">
      <h2>Arugula</h2>
      <p>15</p>
      <p>fresh arugula, spring onion, green garlic, aged mozzarella, fior di latte, grana padano, extra virgin olive oil, lemon juice</p>
    </div>
    
  </div>
    <footer>
      <h1><a href="http://caseyspizza.com">caseyspizza.com</a></h1>
      <p>twitter: @caseyspizza</p>
      <p>call your order in: 650-395-8494</p>
    </footer>
</div>

CSS

#container {
    max-width: 960px;
    margin: 0 auto;
  }
    #menu {
        padding: 0 20px;
    }
  
    .margherita {
      margin-bottom: 40px;
    }
    .margherita h2 {
        width: 90%
        float: left;    
    }
    .margherita .price {
       width: 10%;
       float: right; 
    }
    .margherita p {
      width: 80%;
      margin: 10px 0;
    }

    .funghi {
      margin-bottom: 40px;
      position: relative
    }
    .funghi h2{
      width: 90%;
    }
    .funghi .price{
      width: 10%;
      position: absolute;
      top: 0;
      right: 0;
    }
    .funghi p ~ p{
       width: 80%;
       margin: 10px 0; 
    }

    .arugula {
      margin-botom: 40px;
    }
    .arugula h2{
      width: 90%;
      float: left
    }
    .arugula p{
        width: 10%;
        float: right;
    }
    .arugula p ~ p{
      width: 80%;
      float: left;
      margin: 0 0 10px;
    }
  
    
    h1 {
      font-size: 50px;
      text-align: right;
    }
    h1 span {
     font-size: 40px;
     display: block;
    }
    h3 {
       font-size: 18px;
      text-align: right;
}

footer {
      text-align: right;
      margin-top: 20px;
    }
    
    footer h1 {
        text-tranfrom: uppercase;
        font-size: 30px;
    }
    
    footer a {
      color: #000;
      text-decoration: none;
    }