Pricing

Single

Type 1

<div class="shadow-lg rounded-lg flex justify-center p-8">
	<div class="text-blue text-center w-full">
	  <div class="border-blue-lighter border-b pb-4">
		<h2 class="uppercase">Basic</h2>
		<p class="text-xs mt-1">Individual</p>
	  </div>
	  <div class="mt-4 flex justify-center">
		<div>
		  <div class="flex">
			<p class="mr-1">$</p>
			<h1 class="-mt-1 text-5xl">9<span class="text-xl">.00</span></h1>
		  </div>
		  <p class="text-xs">/month</p>
		</div>
	  </div>
	  <div class="mt-4">
		<button class=" shadow-lg hover:bg-blue-light bg-blue px-8 py-2 text-white text-lg rounded-full">Buy
		</button>
	  </div>
	</div>
</div>

Type 2

 <div class="shadow-lg rounded">
	<div class="rounded-t bg-blue-light text-white p-4 flex flex-col items-center">
	  <p class="text-5xl font-bold">$ 9,99</p>
	  <p class="mt-2">Subscription</p>
	</div>
	<div class="flex flex-col items-center p-4 text-grey-dark ">
	  <p class="mt-2 text-xl">2 users</p>
	  <p class="mt-2 text-xl">1 public space</p>
	  <p class="mt-2 text-xl">Custom domains</p>
	  <p class="mt-2 text-xl">Community Support</p>
	</div>
	<div class="mt-4 ">
	  <button class="w-full flex justify-center items-center shadow bg-blue px-4 py-2 text-white hover:bg-blue-light rounded-b">
		<i class="material-icons mr-2">add_shopping_cart</i> Buy
	  </button>
	</div>
</div>

Multiple

Type 1

<div class="shadow-md rounded">
  <div class="p-4 flex flex-col sm:flex-row">
    <div class="w-full sm:w-1/3 sm:border-r border-grey-light p-2">
     <div class="flex justify-center">
       <div class="p-2 bg-grey-lightest rounded-full">
        <div class="bg-grey-lighter p-4 rounded-full">
          <i class="material-icons text-teal text-5xl">
           card_giftcard
          </i>
        </div>
       </div>
     </div>
     <div class="flex flex-col items-center mt-6">
       <div>
        <h2 class="text-grey-dark">Gift card</h2>
       </div>
       <div class="flex flex-col items-center mt-4 w-full px-6 text-teal">
        <div class="border-t border-grey-lighter py-2 w-full text-center">
          <p>Worth a lot</p>
        </div>
        <div class="border-t border-b border-grey-lighter py-2 w-full text-center">
          <p>100% return policy</p>
        </div>
       </div>
     </div>
     <div class="flex justify-center mt-4 text-teal">
       <h1>$10,-</h1>
     </div>
    </div>
    <div class="w-full sm:w-1/3 sm:border-r border-grey-light p-2 mt-8 sm:mt-0">
     <div class="flex justify-center">
       <div class="p-2 bg-grey-lightest rounded-full">
        <div class="bg-grey-lighter p-4 rounded-full">
          <i class="material-icons text-teal text-5xl">
           sim_card
          </i>
        </div>
       </div>
     </div>
     <div class="flex flex-col items-center mt-6">
       <div>
        <h2 class="text-grey-dark">4G</h2>
       </div>
       <div class="flex flex-col items-center mt-4 w-full px-6 text-teal">
        <div class="border-t border-grey-lighter py-2 w-full text-center">
          <p>0.01% up time</p>
        </div>
        <div class="border-t border-b border-grey-lighter py-2 w-full text-center">
          <p>Free internet</p>
        </div>
       </div>
     </div>
     <div class="flex justify-center mt-4 text-teal">
       <h1>$99,-</h1>
     </div>
    </div>
    <div class="w-full sm:w-1/3 border-grey-light p-2 mt-8 sm:mt-0">
     <div class="flex justify-center">
       <div class="p-2 bg-grey-lightest rounded-full">
        <div class="bg-grey-lighter p-4 rounded-full">
          <i class="material-icons text-teal text-5xl">
           directions_car
          </i>
        </div>
       </div>
     </div>
     <div class="flex flex-col items-center mt-6">
       <div>
        <h2 class="text-grey-dark">Car service</h2>
       </div>
       <div class="flex flex-col items-center mt-4 w-full px-6 text-teal">
        <div class="border-t border-grey-lighter py-2 w-full text-center">
          <p>Fast fixes</p>
        </div>
        <div class="border-t border-b border-grey-lighter py-2 w-full text-center">
          <p>All cars accepted</p>
        </div>
       </div>
     </div>
     <div class="flex justify-center mt-4 text-teal">
       <h1>$199,-</h1>
     </div>
    </div>
  </div>
</div>