The time is now for it to be okay to be great. People in this world shun people for being great.
24/7 Support | Design Tools |
10.000 emails | Private Brand |
<div class="w-full">
<section class="py-20">
<div class="container mx-auto px-4">
<div class="mb-12 flex flex-wrap -mx-4 justify-start">
<div class="px-4 relative w-full lg:w-8/12 text-left">
<h6 class="mb-2 font-bold uppercase text-blueGray-800">Have you seen us?</h6>
<h3 class="text-3xl font-bold mt-3 mb-1 text-blueGray-700">Some of Our Pricing Plans</h3>
<p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">The time is now for it to be okay to be great. People in this world shun people for being great.</p>
</div>
</div>
<div class="flex flex-wrap -mx-4 items-center">
<div class="md:pr-0 px-4 relative w-full md:w-5/12">
<div class="shadow-lg rounded-lg text-center text-blueGray-500 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 bg-blueGray-800">
<div class="bg-transparent first:rounded-t px-5 py-3 border-b border-blueGray-700">
<h4 class="font-bold uppercase my-2 text-white">Freelancer Package</h4>
</div>
<div class="lg:px-12 px-4 py-5 flex-auto">
<div class="text-6xl font-normal leading-tight font-bold text-white">$249</div>
<span class="text-lg text-white opacity-50">Lifetime Access</span>
<ul class="mt-8 mb-8 list-none">
<li class="py-2">
<div class="flex items-center">
<span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-blueGray-500 bg-blueGray-200"><i class="fas fa-folder-open"></i></span>
<h6 class="text-lg text-white opacity-75">Complete documentation</h6>
</div>
</li>
<li class="py-2">
<div class="flex items-center">
<span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-blueGray-500 bg-blueGray-200"><i class="fab fa-sketch"></i></span>
<h6 class="text-lg text-white opacity-75">Working materials in Sketch</h6>
</div>
</li>
<li class="py-2">
<div class="flex items-center">
<span class="inline-flex text-center rounded-full mr-3 items-center justify-center w-8 h-8 text-sm text-blueGray-500 bg-blueGray-200"><i class="fas fa-archive"></i></span>
<h6 class="text-lg text-white opacity-75">Unlimited cloud storage</h6>
</div>
</li>
</ul>
<button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2 text-white bg-red-500 border-red-500 active:bg-red-600 active:border-red-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Buy Now</button>
</div>
<div class="bg-transparent mt-2 py-6 bg-transparent rounded-b px-4 py-3 border-t border-blueGray-700"><a class="text-blueGray-500" href="javascript:;">More details...</a></div>
</div>
</div>
<div class="md:pl-0 px-4 relative w-full md:w-7/12">
<div class="bg-white text-center shadow-lg rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6">
<div class="bg-transparent first:rounded-t px-5 py-3 border-b border-blueGray-300">
<h4 class="pt-2 text-2xl font-bold mt-0 mb-2 text-lightBlue-500">Enterprise Offer</h4>
</div>
<div class="lg:px-12 px-4 py-5 flex-auto">
<div class="leading-relaxed text-blueGray-500">What colors are good, before somebody tells you you shouldn’t like pink because that’s for girls, or you’d instantly become a gay two-year-old.</div>
<table class="mt-6 w-full mb-4 text-blueGray-700 border-collapse border border-solid border-blueGray-200">
<tbody>
<tr>
<td class="text-center p-3 border-t border">24/7 Support</td>
<td class="text-center p-3 border-t border">Design Tools</td>
</tr>
<tr>
<td class="text-center p-3 border-t border">10.000 emails</td>
<td class="text-center p-3 border-t border">Private Brand</td>
</tr>
</tbody>
</table>
</div>
<div class="bg-transparent mt-4 py-6 bg-transparent rounded-b px-4 py-3 border-t border-blueGray-300"><a class="text-lightBlue-500" href="javascript:;">Contact Us</a></div>
</div>
</div>
</div>
</div>
</section>
</div>
The time is now for it to be okay to be great. People in this world shun people for being great.
<div class="w-full">
<section class="relative py-12">
<div class="container mx-auto px-4">
<div class="mb-12">
<div class="flex flex-wrap -mx-4 justify-start">
<div class="px-4 relative w-full text-left">
<span class="text-blueGray-500 bg-blueGray-100 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">Have you seen us?</span>
<h2 class="text-4xl font-bold mt-3 mb-1 text-blueGray-700">Some of Our Pricing Plans</h2>
<p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">The time is now for it to be okay to be great. People in this world shun people for being great.</p>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-4">
<div class="px-4 relative w-full md:w-3/12">
<div class="relative flex flex-col min-w-0 break-words w-full bg-transparent">
<div>
<div class="h-8 text-center"><span class="text-teal-500 bg-teal-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">new collection</span></div>
<img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/tshirt5.d8f53d72.jpg" class="w-full p-6">
</div>
<div class="p-6 flex-auto text-center">
<h5 class="text-2xl font-bold mt-0"><a href="javascript:;" class="">Burberry</a></h5>
<span class="text-blueGray-700 text-lg">$2.300</span>
</div>
</div>
</div>
<div class="px-4 relative w-full md:w-3/12">
<div class="relative flex flex-col min-w-0 break-words w-full bg-transparent">
<div>
<div class="h-8 text-center"><span class="text-red-500 bg-red-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">On Discount</span></div>
<img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/tshirt2.56983c49.jpg" class="w-full p-6">
</div>
<div class="p-6 flex-auto text-center">
<h5 class="text-2xl font-bold mt-0"><a href="javascript:;" class="">Casablanca</a></h5>
<span class="text-blueGray-700 text-lg line-through mr-2">$1.179</span><span class="text-red-500 font-semibold text-lg">$999</span>
</div>
</div>
</div>
<div class="px-4 relative w-full md:w-3/12">
<div class="relative flex flex-col min-w-0 break-words w-full bg-transparent">
<div>
<div class="h-8 text-center"></div>
<img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/tshirt3.db592a23.jpg" class="w-full p-6">
</div>
<div class="p-6 flex-auto text-center">
<h5 class="text-2xl font-bold mt-0"><a href="javascript:;" class="">Palm Angels</a></h5>
<span class="text-blueGray-700 text-lg">$450</span>
</div>
</div>
</div>
<div class="px-4 relative w-full md:w-3/12">
<div class="relative flex flex-col min-w-0 break-words w-full bg-transparent">
<div>
<div class="h-8 text-center"></div>
<img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/tshirt4.9bd30523.jpg" class="w-full p-6">
</div>
<div class="p-6 flex-auto text-center">
<h5 class="text-2xl font-bold mt-0"><a href="javascript:;" class="">Saint Laurent</a></h5>
<span class="text-blueGray-700 text-lg">$349</span>
</div>
</div>
</div>
<div class="mx-auto mt-12"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2 text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Load more...</button></div>
</div>
</div>
</section>
</div>