Pricing
Last updated
Last updated
<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> <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><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>