Mirrors/tailShape
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added other tempalte parts

Browse Source
This commit is contained in:
merajjahir
2022-03-09 20:14:06 +06:00
parent 8ce2e56c27
commit 9fd68f660c
37 changed files with 5753 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

460
public/componets/pricing/pricing.html
View File

@@ -2095,6 +2095,466 @@
<!-- pricing 16 end -->
<!-- pricing 17 start -->
<section class="section_divider">
<div>Pricing 17</div>
</section>
<div class="relative w-full pt-24 pb-56 bg-gray-200">
<div class="container relative flex flex-col justify-between h-full max-w-6xl px-8 mx-auto">
<div class="flex flex-col justify-center w-full">
<h2 class="relative flex items-center self-center inline-block w-auto mb-5 text-4xl font-black">
<span class="absolute inline-block w-full h-4 mt-3 -ml-2 bg-yellow-400"></span>
<span class="relative">Pricing</span>
</h2>
<p class="self-center mb-12 font-medium text-gray-600">Simple, Transparent Pricing for Everyone</p>
<div class="flex flex-col md:flex-row">
<!-- FEATURE 1 -->
<div class="w-full md:w-1/3">
<div class="flex flex-col items-center px-2 py-12 bg-white border-2 border-black rounded-lg lg:px-5 xl:px-12 md:rounded-r-none md:rounded-l-lg">
<div class="font-light"><span class="font-bold text-yellow-500">Basic</span> Plan</div>
<h4 class="flex items-center my-2 text-5xl font-black"><span class="mr-1 text-2xl font-light text-gray-800">$</span>48</h4>
<span class="w-1/2 h-1 bg-yellow-400"></span>
<div class="flex flex-col justify-start w-full px-6 py-10">
<div class="flex items-start w-full">
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">Awesome</span> Feature Here</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">Another</span> Cool Feature</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">And</span> Another</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">Another Feature Here</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">And Another One</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">And One More</p>
</div>
</div>
<a href="#_" class="relative w-full text-center">
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-yellow-500 rounded"></span>
<span class="relative inline-block w-full h-full px-5 py-3 text-base font-bold bg-white border-2 border-black rounded fold-bold">Select This One</span>
</a>
</div>
</div>
<!-- End FEATURE 1 -->
<!-- FEATURE 2-->
<div class="w-full md:w-1/3">
<div class="flex flex-col items-center px-2 py-12 my-8 bg-white border-2 border-black rounded-lg md:border-l-0 md:border-r-0 md:my-0 md:rounded-none lg:px-5 xl:px-12">
<div class="font-light"><span class="font-bold text-green-400">Pro</span> Plan</div>
<h4 class="flex items-center my-2 text-5xl font-black"><span class="mr-1 text-2xl font-light text-gray-800">$</span>98</h4>
<span class="w-1/2 h-1 bg-green-400"></span>
<div class="flex flex-col justify-start w-full px-6 py-10">
<div class="flex items-start w-full">
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">Awesome</span> Feature Here</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">Another</span> Cool Feature</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">And</span> Another</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">Another Feature Here</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">And Another One</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">And One More</p>
</div>
</div>
<a href="#_" class="relative w-full text-center">
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-green-400 rounded"></span>
<span class="relative inline-block w-full h-full px-5 py-3 text-base font-bold bg-white border-2 border-black rounded fold-bold">Select This One</span>
</a>
</div>
</div>
<!-- END FEATURE 2 -->
<!-- FEATURE 3 -->
<div class="w-full md:w-1/3">
<div class="flex flex-col items-center px-2 py-12 ml-0 bg-white border-2 border-black rounded-lg lg:px-6 xl:px-12 md:rounded-l-none md:rounded-r-lg">
<div class="font-light"><span class="font-bold text-purple-500">Premium</span> Plan</div>
<h4 class="flex items-center my-2 text-5xl font-black"><span class="mr-1 text-2xl font-light text-gray-800">$</span>68</h4>
<span class="w-1/2 h-1 bg-purple-400"></span>
<div class="flex flex-col justify-start w-full px-6 py-10">
<div class="flex items-start w-full">
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">Awesome</span> Feature Here</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">Another</span> Cool Feature</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">And</span> Another</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">Another Feature Here</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">And Another One</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">And One More</p>
</div>
</div>
<a href="#_" class="relative w-full text-center">
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-purple-500 rounded"></span>
<span class="relative inline-block w-full h-full px-5 py-3 text-base font-bold bg-white border-2 border-black rounded fold-bold">Select This One</span>
</a>
</div>
</div>
<!-- END FEATURE 3 -->
</div>
</div>
</div>
<!-- Blob SVG Border -->
<svg class="absolute bottom-0 w-full text-black fill-current" viewBox="0 0 1400 74" xmlns="http://www.w3.org/2000/svg"><path d="M0 24C87.243 11.422 173.12 5.133 257.633 5.133 468.305 5.133 578.027 74 700 74c136.015 0 290.882-96.208 481.234-68.867C1268.807 17.71 1341.73 24 1400 24v50H0V24z" /></svg>
</div>
<!-- pricing 17 end -->
<!-- pricing 18 start -->
<section class="section_divider">
<div>Pricing 18</div>
</section>
<div class="relative px-8 py-10 bg-white border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
<div id="pricing" class="container flex flex-col items-center h-full max-w-6xl mx-auto">
<h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our Pricing</h2>
<h3
class="w-full max-w-2xl px-5 px-8 mt-2 text-2xl font-black leading-tight text-center text-gray-900 sm:mt-0 sm:px-0 sm:text-6xl md:px-0">
Simple, Transparent Pricing for Everyone</h3>
<div class="max-w-full mx-auto md:max-w-6xl sm:px-8">
<!-- Basic Pricing -->
<div class="relative flex flex-col items-center block sm:flex-row">
<div
class="relative z-0 w-11/12 max-w-sm my-8 border border-gray-200 rounded-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-mr-4">
<div class="overflow-hidden text-black bg-white border-t border-gray-100 rounded-lg shadow-sm">
<div
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
<h3 class="p-3 text-lg font-bold tracking-wide text-center uppercase">Basic<span
class="ml-2 font-light">Plan</span></h3>
<h4
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>48</h4>
<p class="text-sm text-gray-600">In our basic plan you can take advantage of all these
features below.
</p>
</div>
<div class="flex flex-wrap px-6 mt-8">
<ul>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">Awesome Feature</span>
</li>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">And Another Cool Feature</span>
</li>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">One More Feature</span>
</li>
</ul>
</div>
<div class="flex items-center block p-8 uppercase">
<a href="#_"
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
This Plan</a>
</div>
</div>
</div>
<!-- Pro Pricing -->
<div
class="relative z-10 w-full max-w-md my-8 bg-white rounded-lg shadow-lg sm:w-2/3 lg:w-1/3 sm:my-5">
<div
class="py-4 text-sm font-semibold leading-none tracking-wide text-center text-white uppercase bg-indigo-500 rounded-t">
Most Popular</div>
<div class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Pro<span
class="ml-2 font-light">Plan</span></h3>
<h4
class="flex items-center justify-center pb-6 text-5xl font-bold text-center text-gray-900">
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>98</h4>
<p class="text-sm text-gray-600">Our most popular package is the Pro Plan which gives you
access to the
following:</p>
</div>
<div class="flex justify-start pl-12 mt-8 sm:justify-start">
<ul>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">Really Cool Features</span>
</li>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">Another Cool Feature</span>
</li>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">And One More</span>
</li>
</ul>
</div>
<div class="flex items-center block p-8 uppercase">
<a href="#_"
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-indigo-600">Select
This Plan</a>
</div>
</div>
<!-- Premium Pricing -->
<div
class="relative z-0 w-11/12 max-w-sm my-8 rounded-lg shadow-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-ml-4">
<div class="overflow-hidden text-black bg-white rounded-lg shadow-lg shadow-inner">
<div
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-8">
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Premium<span
class="ml-2 font-light">Plan</span></h3>
<h4
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>78</h4>
<p class="pl-2 text-sm text-gray-600">With our premium plan you can take advantage of
all the following
features:</p>
</div>
<div class="flex flex-wrap px-8 mt-8">
<ul>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">Totally Tubular Feature</span>
</li>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">Super Cool Feature</span>
</li>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">And One More</span>
</li>
</ul>
</div>
<div class="flex items-center block p-8 uppercase">
<a href="#_"
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
This Plan</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- pricing 18 end -->
<!-- start of script section -->
<script type="text/javascript">