mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-27 20:17:02 +00:00
added faq's and fixed some pricing's
This commit is contained in:
merajjahir
@@ -17,6 +17,135 @@
|
||||
</button>
|
||||
|
||||
|
||||
<!-- pricing 10 start -->
|
||||
<section class="section_divider">
|
||||
<div>Pricing 10</div>
|
||||
</section>
|
||||
<section class="py-20 dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="max-w-2xl mx-auto mb-16 text-center">
|
||||
<span class="font-bold tracking-wider uppercase dark:text-violet-400 text-purple-700">Pricing</span>
|
||||
<h2 class="text-4xl font-bold lg:text-5xl">Choose your best plan</h2>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-stretch -mx-4">
|
||||
<div class="flex w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
|
||||
<div class="flex flex-col p-6 space-y-6 rounded shadow sm:p-8 dark:bg-gray-900">
|
||||
<div class="space-y-2">
|
||||
<h4 class="text-2xl font-bold">Beginner</h4>
|
||||
<span class="text-6xl font-bold">Free</span>
|
||||
</div>
|
||||
<p class="mt-3 leading-relaxed dark:text-gray-400">Etiam ac convallis enim, eget euismod dolor.</p>
|
||||
<ul class="flex-1 mb-6 dark:text-gray-400">
|
||||
<li class="flex mb-2 space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Aenean quis</span>
|
||||
</li>
|
||||
<li class="flex mb-2 space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500 ">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Morbi semper</span>
|
||||
</li>
|
||||
<li class="flex mb-2 space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500 ">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Tristique enim nec</span>
|
||||
</li>
|
||||
</ul>
|
||||
<button type="button" class="inline-block px-5 py-3 font-semibold tracking-wider text-center rounded dark:bg-violet-500 dark:text-gray-900 bg-purple-600 text-white">Get Started</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
|
||||
<div class="flex flex-col p-6 space-y-6 rounded shadow sm:p-8 dark:bg-violet-400 dark:text-gray-900 bg-violet-700 first-letter:">
|
||||
<div class="space-y-2">
|
||||
<h4 class="text-2xl font-bold text-white">Pro</h4>
|
||||
<span class="text-6xl font-bold text-white ">$24
|
||||
<span class="text-sm tracking-wide">/month</span>
|
||||
</span>
|
||||
</div>
|
||||
<p class="leading-relaxed text-white">Morbi cursus ut sapien sit amet consectetur.</p>
|
||||
<ul class="flex-1 space-y-2">
|
||||
<li class="flex items-center space-x-2 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 ">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Everything in Free</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-2 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Phasellus tellus</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-2 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Praesent faucibus</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-2 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Aenean et lectus blandit</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-block w-full px-5 py-3 font-bold tracking-wider text-center rounded dark:bg-gray-800 dark:text-violet-400 bg-gray-300 text-purple-700">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
|
||||
<div class="p-6 space-y-6 rounded shadow sm:p-8 dark:bg-gray-900">
|
||||
<div class="space-y-2">
|
||||
<h4 class="text-2xl font-bold">Team</h4>
|
||||
<span class="text-6xl font-bold">$72
|
||||
<span class="text-sm tracking-wide">/month</span>
|
||||
</span>
|
||||
</div>
|
||||
<p class="leading-relaxed dark:text-gray-400">Phasellus ultrices bibendum nibh in vehicula.</p>
|
||||
<ul class="space-y-2 dark:text-gray-400">
|
||||
<li class="flex items-start space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Everything in Pro</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Fusce sem ligula</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Curabitur dictum</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Duis odio eros</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Vivamus ut lectus ex</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-block w-full px-5 py-3 font-semibold tracking-wider text-center rounded dark:bg-violet-400 dark:text-gray-900 bg-purple-600 text-white">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- pricing 10 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
|
||||
71
public/componets/pricing/11_pricing.html
Normal file
71
public/componets/pricing/11_pricing.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Pricing 11</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- pricingd 11 start -->
|
||||
<section class="section_divider" id="pricing_11">
|
||||
<div>Pricing 11</div>
|
||||
</section>
|
||||
<section class="py-6 dark:bg-gray-800 dark:text-gray-50 bg-gray-100 text-gray-900">
|
||||
<div class="container mx-auto flex flex-col items-center justify-center max-w-lg p-4 lg:max-w-full sm:p-10 lg:flex-row">
|
||||
<div class="flex flex-col items-center justify-center flex-1 p-4 pb-8 sm:p-8 lg:p-16 dark:bg-gray-900 bg-gray-50">
|
||||
<span class="text-sm">Basic</span>
|
||||
<p class="text-5xl font-bold text-center">39€</p>
|
||||
<p class="font-semibold text-center">Nemo deserunt possimus quo provident recusandae! Dolores qui architecto omnis pariatur eos voluptatibus sequi cum, non nesciunt aspernatur a?</p>
|
||||
<button class="px-8 py-3 mt-6 text-lg font-semibold border rounded sm:mt-12 dark:border-gray-700 border-gray-300">Sign up</button>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center flex-1 p-4 pb-8 text-center rounded-md sm:p-8 lg:p-16 dark:bg-violet-400 dark:text-gray-900 bg-violet-600 text-gray-50">
|
||||
<span class="text-sm font-semibold">Advanced</span>
|
||||
<p class="text-5xl font-bold">89€</p>
|
||||
<p class="font-semibold">Nemo deserunt possimus quo provident recusandae! Dolores qui architecto omnis pariatur eos voluptatibus sequi cum, non nesciunt aspernatur a?</p>
|
||||
<button class="px-8 py-3 mt-6 text-lg font-semibold rounded sm:mt-12 dark:bg-gray-800 dark:text-gray-50 bg-gray-100 text-gray-900">Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- pricingd 11 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
198
public/componets/pricing/12_pricing.html
Normal file
198
public/componets/pricing/12_pricing.html
Normal file
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Pricing 12</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- pricing 12 start -->
|
||||
<section class="section_divider" id="pricing_12">
|
||||
<div>Pricing 12</div>
|
||||
</section>
|
||||
<section class="dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="container mx-auto p-6 overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<caption class="sr-only">Pricing plan comparison</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">
|
||||
<h2 class="px-2 text-lg font-medium">Starter</h2>
|
||||
<p class="mb-3">
|
||||
<span class="text-2xl font-bold sm:text-4xl dark:text-gray-50">0€</span>
|
||||
<span class="font-medium dark:text-gray-400">/mo</span>
|
||||
</p>
|
||||
</th>
|
||||
<th scope="col">
|
||||
<h2 class="px-2 text-lg font-medium">Standard</h2>
|
||||
<p class="mb-3">
|
||||
<span class="text-2xl font-bold sm:text-4xl dark:text-gray-50">19€</span>
|
||||
<span class="font-medium dark:text-gray-400">/mo</span>
|
||||
</p>
|
||||
</th>
|
||||
<th scope="col">
|
||||
<h2 class="px-2 text-lg font-medium">Premium</h2>
|
||||
<p class="mb-3">
|
||||
<span class="text-2xl font-bold sm:text-4xl dark:text-gray-50">49€</span>
|
||||
<span class="font-medium dark:text-gray-400">/mo</span>
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="space-y-6 text-center divide-y divide-gray-700">
|
||||
<tr>
|
||||
<th scope="row" class="text-left">
|
||||
<h3 class="py-3">Euismod</h3>
|
||||
</th>
|
||||
<td>
|
||||
<span class="block text-sm">1</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="block text-sm">10</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="block text-sm">100</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-left">
|
||||
<h3 class="py-3">Principes et</h3>
|
||||
</th>
|
||||
<td>
|
||||
<span class="block text-sm">0,5 GB</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="block text-sm">5 GB</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="block text-sm">500 GB</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-left">
|
||||
<h3 class="py-3">Et mel porro</h3>
|
||||
</th>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Free plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Standard plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-left">
|
||||
<h3 class="py-3">Veniam suscipiantur</h3>
|
||||
</th>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Free plan" class="w-5 h-5 mx-auto dark:text-gray-600">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Standard plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-left">
|
||||
<h3 class="py-3">Ornatus tacimates</h3>
|
||||
</th>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Free plan" class="w-5 h-5 mx-auto dark:text-gray-600">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Standard plan" class="w-5 h-5 mx-auto dark:text-gray-600">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600" >
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-left">
|
||||
<h3 class="py-3">Aliquam fastidii in mei</h3>
|
||||
</th>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Free plan" class="w-5 h-5 mx-auto dark:text-gray-600">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Standard plan" class="w-5 h-5 mx-auto dark:text-gray-600">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- pricing 12 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
125
public/componets/pricing/13_pricing.html
Normal file
125
public/componets/pricing/13_pricing.html
Normal file
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Pricing 13</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- pricing 13 start -->
|
||||
<section class="section_divider" id="pricing_13">
|
||||
<div>Pricing 13</div>
|
||||
</section>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<p class="text-xl text-center text-gray-500 dark:text-gray-300">
|
||||
Choose your plan
|
||||
</p>
|
||||
|
||||
<h1 class="mt-4 text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">Pricing Plan</h1>
|
||||
|
||||
|
||||
<div class="mt-6 space-y-8 xl:mt-12">
|
||||
<div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border cursor-pointer rounded-xl dark:border-gray-700">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-9 sm:w-9" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<div class="flex flex-col items-center mx-5 space-y-1">
|
||||
<h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Basic</h2>
|
||||
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
||||
Save 20%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-gray-500 sm:text-4xl dark:text-gray-300">$49 <span class="text-base font-medium">/Month</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border border-blue-500 cursor-pointer rounded-xl">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600 sm:h-9 sm:w-9" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<div class="flex flex-col items-center mx-5 space-y-1">
|
||||
<h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Popular</h2>
|
||||
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
||||
Save 20%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-blue-600 sm:text-4xl">$99 <span class="text-base font-medium">/Month</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border cursor-pointer rounded-xl dark:border-gray-700">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-9 sm:w-9" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<div class="flex flex-col items-center mx-5 space-y-1">
|
||||
<h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Enterprise</h2>
|
||||
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
||||
Save 20%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-gray-500 sm:text-4xl dark:text-gray-300">$149 <span class="text-base font-medium">/Month</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button class="px-8 py-2 tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
Choose Plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- pricing 13 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
172
public/componets/pricing/14_pricing.html
Normal file
172
public/componets/pricing/14_pricing.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Pricing 14</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- pricing 14 start -->
|
||||
<section class="section_divider">
|
||||
<div>Pricing 14</div>
|
||||
</section>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">Simple pricing plan</h1>
|
||||
|
||||
<p class="max-w-2xl mx-auto mt-4 text-center text-gray-500 xl:mt-6 dark:text-gray-300">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias quas magni libero consequuntur voluptatum velit amet id repudiandae ea, deleniti laborum in neque eveniet.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 mt-6 lg:grid-cols-3 xl:mt-12">
|
||||
<div class="flex items-center justify-between px-8 py-4 border cursor-pointer rounded-xl dark:border-gray-700">
|
||||
<div class="flex flex-col items-center space-y-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Basic</h2>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-gray-500 sm:text-3xl dark:text-gray-300">Free</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between px-8 py-4 border border-blue-500 cursor-pointer rounded-xl">
|
||||
<div class="flex flex-col items-center space-y-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600 dark:text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Standard</h2>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-col items-center space-y-1">
|
||||
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full dark:text-blue-400 sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
||||
Save 30%
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-blue-600 dark:text-blue-500 sm:text-3xl">$99 <span class="text-base font-medium">/Yearly</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between px-8 py-4 border cursor-pointer rounded-xl dark:border-gray-700">
|
||||
<div class="flex flex-col items-center space-y-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Pro</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center space-y-1">
|
||||
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full dark:text-blue-400 sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
||||
Save 20%
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-gray-500 sm:text-3xl dark:text-gray-300">$149 <span class="text-base font-medium">/Month</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-8 mt-8 space-y-8 bg-gray-100 dark:bg-gray-800 rounded-xl">
|
||||
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
||||
<p class="textlg sm:text-xl">Unlimited Links</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
||||
<p class="textlg sm:text-xl">Own analytics platfrom</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
||||
<p class="textlg sm:text-xl">Full Support with discussion</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
||||
<p class="textlg sm:text-xl">Optimize hashtags</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
||||
<p class="textlg sm:text-xl">Mobile app</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
||||
<p class="textlg sm:text-xl">Unlimited users</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-8">
|
||||
<button class="px-8 py-2 tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
Choose Plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- pricing 14 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
283
public/componets/pricing/15_pricing.html
Normal file
283
public/componets/pricing/15_pricing.html
Normal file
@@ -0,0 +1,283 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Pricing 15</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- pricing 15 start -->
|
||||
<section class="section_divider" id="pricing_15">
|
||||
<div>Pricing 15</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Simple, transparent pricing</h2>
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-400">No Contracts. No surorise fees.</p>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden p-0.5 mt-6 border rounded-lg dark:border-gray-700">
|
||||
<div class="sm:-mx-0.5 flex">
|
||||
<button class=" focus:outline-none px-3 w-1/2 sm:w-auto py-1 sm:mx-0.5 text-white bg-blue-500 rounded-lg">Monthly</button>
|
||||
<button class=" focus:outline-none px-3 w-1/2 sm:w-auto py-1 sm:mx-0.5 text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 bg-transparent rounded-lg hover:bg-gray-200">Yearly</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 mt-16 -mx-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
|
||||
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Intro</p>
|
||||
<h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$19 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>
|
||||
|
||||
<div class="mt-8 space-y-8">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
|
||||
Choose plan
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
|
||||
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Base</p>
|
||||
<h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$39 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>
|
||||
|
||||
<div class="mt-8 space-y-8">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
|
||||
Choose plan
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 transition-colors duration-200 transform bg-gray-700 rounded-lg dark:bg-gray-600">
|
||||
<p class="text-lg font-medium text-gray-100">Popular</p>
|
||||
<h4 class="mt-2 text-4xl font-semibold text-gray-100">$99 <span class="text-base font-normal text-gray-400">/ Month</span></h4>
|
||||
<p class="mt-4 text-gray-300">For most businesses that want to optimaize web queries.</p>
|
||||
|
||||
<div class="mt-8 space-y-8">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-300">All limited links</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-300">Own analytics platform</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-300">Chat support</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-300">Optimize hashtags</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-300">Unlimited users</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
|
||||
Choose plan
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
|
||||
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Exterprise</p>
|
||||
<h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$199 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>
|
||||
|
||||
<div class="mt-8 space-y-8">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
|
||||
Choose plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- pricing 15 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
123
public/componets/pricing/16_pricing.html
Normal file
123
public/componets/pricing/16_pricing.html
Normal file
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Pricing 16</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- pricing 16 start -->
|
||||
<section class="section_divider" id="pricing_16">
|
||||
<div>Pricing 16</div>
|
||||
</section>
|
||||
<section class="text-gray-600 body-font dark:bg-gray-800">
|
||||
<div class="container px-5 py-24 mx-auto">
|
||||
<div class="flex flex-col text-center w-full mb-20">
|
||||
<h1 class="sm:text-4xl text-3xl font-medium title-font mb-2 text-gray-900 dark:text-gray-300">Pricing</h1>
|
||||
<p class="lg:w-2/3 mx-auto leading-relaxed text-base dark:text-gray-300">Banh mi cornhole echo park skateboard authentic crucifix neutra tilde lyft biodiesel artisan direct trade mumblecore 3 wolf moon twee</p>
|
||||
</div>
|
||||
<div class="lg:w-2/3 w-full mx-auto overflow-auto">
|
||||
<table class="table-auto w-full text-left whitespace-no-wrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl">Plan</th>
|
||||
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Speed</th>
|
||||
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Storage</th>
|
||||
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Price</th>
|
||||
<th class="w-10 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tr rounded-br"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="px-4 py-3 dark:text-gray-300" >Start</td>
|
||||
<td class="px-4 py-3 dark:text-gray-300">5 Mb/s</td>
|
||||
<td class="px-4 py-3 dark:text-gray-300">15 GB</td>
|
||||
<td class="px-4 py-3 text-lg text-gray-900 dark:text-gray-100">Free</td>
|
||||
<td class="w-10 text-center">
|
||||
<input name="plan" type="radio">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">Pro</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">25 Mb/s</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">25 GB</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-100 px-4 py-3 text-lg text-gray-900">$24</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 w-10 text-center">
|
||||
<input name="plan" type="radio">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">Business</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">36 Mb/s</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">40 GB</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-100 px-4 py-3 text-lg text-gray-900">$50</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 w-10 text-center">
|
||||
<input name="plan" type="radio">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-300 px-4 py-3">Exclusive</td>
|
||||
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-300 px-4 py-3">48 Mb/s</td>
|
||||
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-300 px-4 py-3">120 GB</td>
|
||||
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-100 px-4 py-3 text-lg text-gray-900">$72</td>
|
||||
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-300 w-10 text-center">
|
||||
<input name="plan" type="radio">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="flex pl-4 mt-4 lg:w-2/3 w-full mx-auto">
|
||||
<a class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0">Learn More
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<button class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- pricing 16 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -16,6 +16,44 @@
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- pricing 9 start -->
|
||||
<section class="section_divider">
|
||||
<div>Pricing 9</div>
|
||||
</section>
|
||||
<section class="bg-gray-100 dark:bg-gray-800">
|
||||
<div class="max-w-7xl px-4 py-24 mx-auto text-left md:text-center ">
|
||||
|
||||
<div class="grid grid-cols-1 gap-24 md:grid-cols-2">
|
||||
<div>
|
||||
<p class="mb-1 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-300">For Developers</p>
|
||||
<h1 class="mb-2 text-5xl font-bold leading-tight text-gray-900 dark:text-white md:font-extrabold">$9<span class="text-2xl font-medium text-gray-600 dark:text-gray-300"> per month</span></h1>
|
||||
<p class="mb-6 text-lg text-gray-600 dark:text-gray-400">
|
||||
One plan for any organization—from startups to Fortune 500s. We offer 50% off of for all students and universities. Please get in touch with us and provide proof of your status.
|
||||
</p>
|
||||
<div class="justify-center block space-x-0 space-y-2 md:flex md:space-x-2 md:space-y-0">
|
||||
<a href="#" class="w-full bg-purple-700 px-4 py-2 text-lg font-semibold text-white rounded dark:bg-gray-800 dark:border-2 dark:border-gray-300 dark:text-gray-100 dark:hover:bg-gray-900 md:w-auto">Get Started</a>
|
||||
<a href="#" class="w-full bg-gray-100 px-4 py-2 text-lg font-semibold text-gray-800 rounded hover:bg-gray-300 md:w-auto">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-1 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-300">For Designers</p>
|
||||
<h1 class="mb-2 text-5xl font-bold leading-tight text-gray-900 dark:text-white md:font-extrabold">$19<span class="text-2xl font-medium text-gray-600 dark:text-gray-300 "> per month</span></h1>
|
||||
<p class="mb-6 text-lg text-gray-600 dark:text-gray-400 ">
|
||||
One plan for any organization—from startups to Fortune 500s. We offer 50% off of for all students and universities. Please get in touch with us and provide proof of your status.
|
||||
</p>
|
||||
<div class="justify-center block space-x-0 space-y-2 md:flex md:space-x-2 md:space-y-0">
|
||||
<a href="#" class="w-full bg-purple-700 px-4 py-2 text-lg font-semibold text-white rounded dark:bg-gray-800 dark:border-2 dark:border-gray-300 dark:text-gray-100 dark:hover:bg-gray-900 md:w-auto">Get Started</a>
|
||||
<a href="#" class="w-full bg-gray-100 px-4 py-2 text-lg font-semibold text-gray-800 rounded hover:bg-gray-300 md:w-auto">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- pricing 9 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
|
||||
@@ -1243,6 +1243,857 @@
|
||||
|
||||
<!-- pricing 8 end -->
|
||||
|
||||
<!-- pricing 9 start -->
|
||||
<section class="section_divider">
|
||||
<div>Pricing 9</div>
|
||||
</section>
|
||||
<section class="bg-gray-100 dark:bg-gray-800">
|
||||
<div class="max-w-7xl px-4 py-24 mx-auto text-left md:text-center ">
|
||||
|
||||
<div class="grid grid-cols-1 gap-24 md:grid-cols-2">
|
||||
<div>
|
||||
<p class="mb-1 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-300">For Developers</p>
|
||||
<h1 class="mb-2 text-5xl font-bold leading-tight text-gray-900 dark:text-white md:font-extrabold">$9<span class="text-2xl font-medium text-gray-600 dark:text-gray-300"> per month</span></h1>
|
||||
<p class="mb-6 text-lg text-gray-600 dark:text-gray-400">
|
||||
One plan for any organization—from startups to Fortune 500s. We offer 50% off of for all students and universities. Please get in touch with us and provide proof of your status.
|
||||
</p>
|
||||
<div class="justify-center block space-x-0 space-y-2 md:flex md:space-x-2 md:space-y-0">
|
||||
<a href="#" class="w-full bg-purple-700 px-4 py-2 text-lg font-semibold text-white rounded dark:bg-gray-800 dark:border-2 dark:border-gray-300 dark:text-gray-100 dark:hover:bg-gray-900 md:w-auto">Get Started</a>
|
||||
<a href="#" class="w-full bg-gray-100 px-4 py-2 text-lg font-semibold text-gray-800 rounded hover:bg-gray-300 md:w-auto">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-1 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-300">For Designers</p>
|
||||
<h1 class="mb-2 text-5xl font-bold leading-tight text-gray-900 dark:text-white md:font-extrabold">$19<span class="text-2xl font-medium text-gray-600 dark:text-gray-300 "> per month</span></h1>
|
||||
<p class="mb-6 text-lg text-gray-600 dark:text-gray-400 ">
|
||||
One plan for any organization—from startups to Fortune 500s. We offer 50% off of for all students and universities. Please get in touch with us and provide proof of your status.
|
||||
</p>
|
||||
<div class="justify-center block space-x-0 space-y-2 md:flex md:space-x-2 md:space-y-0">
|
||||
<a href="#" class="w-full bg-purple-700 px-4 py-2 text-lg font-semibold text-white rounded dark:bg-gray-800 dark:border-2 dark:border-gray-300 dark:text-gray-100 dark:hover:bg-gray-900 md:w-auto">Get Started</a>
|
||||
<a href="#" class="w-full bg-gray-100 px-4 py-2 text-lg font-semibold text-gray-800 rounded hover:bg-gray-300 md:w-auto">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- pricing 9 end -->
|
||||
|
||||
<!-- pricing 10 start -->
|
||||
<section class="section_divider">
|
||||
<div>Pricing 10</div>
|
||||
</section>
|
||||
<section class="py-20 dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="max-w-2xl mx-auto mb-16 text-center">
|
||||
<span class="font-bold tracking-wider uppercase dark:text-violet-400 text-purple-700">Pricing</span>
|
||||
<h2 class="text-4xl font-bold lg:text-5xl">Choose your best plan</h2>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-stretch -mx-4">
|
||||
<div class="flex w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
|
||||
<div class="flex flex-col p-6 space-y-6 rounded shadow sm:p-8 dark:bg-gray-900">
|
||||
<div class="space-y-2">
|
||||
<h4 class="text-2xl font-bold">Beginner</h4>
|
||||
<span class="text-6xl font-bold">Free</span>
|
||||
</div>
|
||||
<p class="mt-3 leading-relaxed dark:text-gray-400">Etiam ac convallis enim, eget euismod dolor.</p>
|
||||
<ul class="flex-1 mb-6 dark:text-gray-400">
|
||||
<li class="flex mb-2 space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Aenean quis</span>
|
||||
</li>
|
||||
<li class="flex mb-2 space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500 ">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Morbi semper</span>
|
||||
</li>
|
||||
<li class="flex mb-2 space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500 ">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Tristique enim nec</span>
|
||||
</li>
|
||||
</ul>
|
||||
<button type="button" class="inline-block px-5 py-3 font-semibold tracking-wider text-center rounded dark:bg-violet-500 dark:text-gray-900 bg-purple-600 text-white">Get Started</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
|
||||
<div class="flex flex-col p-6 space-y-6 rounded shadow sm:p-8 dark:bg-violet-400 dark:text-gray-900 bg-violet-700 first-letter:">
|
||||
<div class="space-y-2">
|
||||
<h4 class="text-2xl font-bold text-white">Pro</h4>
|
||||
<span class="text-6xl font-bold text-white ">$24
|
||||
<span class="text-sm tracking-wide">/month</span>
|
||||
</span>
|
||||
</div>
|
||||
<p class="leading-relaxed text-white">Morbi cursus ut sapien sit amet consectetur.</p>
|
||||
<ul class="flex-1 space-y-2">
|
||||
<li class="flex items-center space-x-2 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 ">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Everything in Free</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-2 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Phasellus tellus</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-2 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Praesent faucibus</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-2 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Aenean et lectus blandit</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-block w-full px-5 py-3 font-bold tracking-wider text-center rounded dark:bg-gray-800 dark:text-violet-400 bg-gray-300 text-purple-700">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
|
||||
<div class="p-6 space-y-6 rounded shadow sm:p-8 dark:bg-gray-900">
|
||||
<div class="space-y-2">
|
||||
<h4 class="text-2xl font-bold">Team</h4>
|
||||
<span class="text-6xl font-bold">$72
|
||||
<span class="text-sm tracking-wide">/month</span>
|
||||
</span>
|
||||
</div>
|
||||
<p class="leading-relaxed dark:text-gray-400">Phasellus ultrices bibendum nibh in vehicula.</p>
|
||||
<ul class="space-y-2 dark:text-gray-400">
|
||||
<li class="flex items-start space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Everything in Pro</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Fusce sem ligula</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Curabitur dictum</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Duis odio eros</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Vivamus ut lectus ex</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-block w-full px-5 py-3 font-semibold tracking-wider text-center rounded dark:bg-violet-400 dark:text-gray-900 bg-purple-600 text-white">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- pricing 10 end -->
|
||||
|
||||
|
||||
<!-- pricingd 11 start -->
|
||||
<section class="section_divider">
|
||||
<div>Pricing 11</div>
|
||||
</section>
|
||||
<section class="py-6 dark:bg-gray-800 dark:text-gray-50 bg-gray-100 text-gray-900">
|
||||
<div class="container mx-auto flex flex-col items-center justify-center max-w-lg p-4 lg:max-w-full sm:p-10 lg:flex-row">
|
||||
<div class="flex flex-col items-center justify-center flex-1 p-4 pb-8 sm:p-8 lg:p-16 dark:bg-gray-900 bg-gray-50">
|
||||
<span class="text-sm">Basic</span>
|
||||
<p class="text-5xl font-bold text-center">39€</p>
|
||||
<p class="font-semibold text-center">Nemo deserunt possimus quo provident recusandae! Dolores qui architecto omnis pariatur eos voluptatibus sequi cum, non nesciunt aspernatur a?</p>
|
||||
<button class="px-8 py-3 mt-6 text-lg font-semibold border rounded sm:mt-12 dark:border-gray-700 border-gray-300">Sign up</button>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center flex-1 p-4 pb-8 text-center rounded-md sm:p-8 lg:p-16 dark:bg-violet-400 dark:text-gray-900 bg-violet-600 text-gray-50">
|
||||
<span class="text-sm font-semibold">Advanced</span>
|
||||
<p class="text-5xl font-bold">89€</p>
|
||||
<p class="font-semibold">Nemo deserunt possimus quo provident recusandae! Dolores qui architecto omnis pariatur eos voluptatibus sequi cum, non nesciunt aspernatur a?</p>
|
||||
<button class="px-8 py-3 mt-6 text-lg font-semibold rounded sm:mt-12 dark:bg-gray-800 dark:text-gray-50 bg-gray-100 text-gray-900">Sign up</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- pricingd 11 end -->
|
||||
|
||||
<!-- pricing 12 start -->
|
||||
<section class="section_divider">
|
||||
<div>Pricing 12</div>
|
||||
</section>
|
||||
<section class="dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="container mx-auto p-6 overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<caption class="sr-only">Pricing plan comparison</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">
|
||||
<h2 class="px-2 text-lg font-medium">Starter</h2>
|
||||
<p class="mb-3">
|
||||
<span class="text-2xl font-bold sm:text-4xl dark:text-gray-50">0€</span>
|
||||
<span class="font-medium dark:text-gray-400">/mo</span>
|
||||
</p>
|
||||
</th>
|
||||
<th scope="col">
|
||||
<h2 class="px-2 text-lg font-medium">Standard</h2>
|
||||
<p class="mb-3">
|
||||
<span class="text-2xl font-bold sm:text-4xl dark:text-gray-50">19€</span>
|
||||
<span class="font-medium dark:text-gray-400">/mo</span>
|
||||
</p>
|
||||
</th>
|
||||
<th scope="col">
|
||||
<h2 class="px-2 text-lg font-medium">Premium</h2>
|
||||
<p class="mb-3">
|
||||
<span class="text-2xl font-bold sm:text-4xl dark:text-gray-50">49€</span>
|
||||
<span class="font-medium dark:text-gray-400">/mo</span>
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="space-y-6 text-center divide-y divide-gray-700">
|
||||
<tr>
|
||||
<th scope="row" class="text-left">
|
||||
<h3 class="py-3">Euismod</h3>
|
||||
</th>
|
||||
<td>
|
||||
<span class="block text-sm">1</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="block text-sm">10</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="block text-sm">100</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-left">
|
||||
<h3 class="py-3">Principes et</h3>
|
||||
</th>
|
||||
<td>
|
||||
<span class="block text-sm">0,5 GB</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="block text-sm">5 GB</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="block text-sm">500 GB</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-left">
|
||||
<h3 class="py-3">Et mel porro</h3>
|
||||
</th>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Free plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Standard plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-left">
|
||||
<h3 class="py-3">Veniam suscipiantur</h3>
|
||||
</th>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Free plan" class="w-5 h-5 mx-auto dark:text-gray-600">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Standard plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-left">
|
||||
<h3 class="py-3">Ornatus tacimates</h3>
|
||||
</th>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Free plan" class="w-5 h-5 mx-auto dark:text-gray-600">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Standard plan" class="w-5 h-5 mx-auto dark:text-gray-600">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600" >
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-left">
|
||||
<h3 class="py-3">Aliquam fastidii in mei</h3>
|
||||
</th>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Free plan" class="w-5 h-5 mx-auto dark:text-gray-600">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Standard plan" class="w-5 h-5 mx-auto dark:text-gray-600">
|
||||
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
<td>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- pricing 12 end -->
|
||||
|
||||
|
||||
<!-- pricing 13 start -->
|
||||
<section class="section_divider">
|
||||
<div>Pricing 13</div>
|
||||
</section>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<p class="text-xl text-center text-gray-500 dark:text-gray-300">
|
||||
Choose your plan
|
||||
</p>
|
||||
|
||||
<h1 class="mt-4 text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">Pricing Plan</h1>
|
||||
|
||||
|
||||
<div class="mt-6 space-y-8 xl:mt-12">
|
||||
<div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border cursor-pointer rounded-xl dark:border-gray-700">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-9 sm:w-9" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<div class="flex flex-col items-center mx-5 space-y-1">
|
||||
<h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Basic</h2>
|
||||
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
||||
Save 20%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-gray-500 sm:text-4xl dark:text-gray-300">$49 <span class="text-base font-medium">/Month</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border border-blue-500 cursor-pointer rounded-xl">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600 sm:h-9 sm:w-9" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<div class="flex flex-col items-center mx-5 space-y-1">
|
||||
<h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Popular</h2>
|
||||
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
||||
Save 20%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-blue-600 sm:text-4xl">$99 <span class="text-base font-medium">/Month</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border cursor-pointer rounded-xl dark:border-gray-700">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-9 sm:w-9" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<div class="flex flex-col items-center mx-5 space-y-1">
|
||||
<h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Enterprise</h2>
|
||||
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
||||
Save 20%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-gray-500 sm:text-4xl dark:text-gray-300">$149 <span class="text-base font-medium">/Month</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button class="px-8 py-2 tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
Choose Plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- pricing 13 end -->
|
||||
|
||||
<!-- pricing 14 start -->
|
||||
<section class="section_divider">
|
||||
<div>Pricing 14</div>
|
||||
</section>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">Simple pricing plan</h1>
|
||||
|
||||
<p class="max-w-2xl mx-auto mt-4 text-center text-gray-500 xl:mt-6 dark:text-gray-300">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias quas magni libero consequuntur voluptatum velit amet id repudiandae ea, deleniti laborum in neque eveniet.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 mt-6 lg:grid-cols-3 xl:mt-12">
|
||||
<div class="flex items-center justify-between px-8 py-4 border cursor-pointer rounded-xl dark:border-gray-700">
|
||||
<div class="flex flex-col items-center space-y-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Basic</h2>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-gray-500 sm:text-3xl dark:text-gray-300">Free</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between px-8 py-4 border border-blue-500 cursor-pointer rounded-xl">
|
||||
<div class="flex flex-col items-center space-y-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600 dark:text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Standard</h2>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-col items-center space-y-1">
|
||||
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full dark:text-blue-400 sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
||||
Save 30%
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-blue-600 dark:text-blue-500 sm:text-3xl">$99 <span class="text-base font-medium">/Yearly</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between px-8 py-4 border cursor-pointer rounded-xl dark:border-gray-700">
|
||||
<div class="flex flex-col items-center space-y-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Pro</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center space-y-1">
|
||||
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full dark:text-blue-400 sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
||||
Save 20%
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-gray-500 sm:text-3xl dark:text-gray-300">$149 <span class="text-base font-medium">/Month</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-8 mt-8 space-y-8 bg-gray-100 dark:bg-gray-800 rounded-xl">
|
||||
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
||||
<p class="textlg sm:text-xl">Unlimited Links</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
||||
<p class="textlg sm:text-xl">Own analytics platfrom</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
||||
<p class="textlg sm:text-xl">Full Support with discussion</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
||||
<p class="textlg sm:text-xl">Optimize hashtags</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
||||
<p class="textlg sm:text-xl">Mobile app</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
||||
<p class="textlg sm:text-xl">Unlimited users</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-8">
|
||||
<button class="px-8 py-2 tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
||||
Choose Plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- pricing 14 end -->
|
||||
|
||||
<!-- pricing 15 start -->
|
||||
<section class="section_divider">
|
||||
<div>Pricing 15</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Simple, transparent pricing</h2>
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-400">No Contracts. No surorise fees.</p>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden p-0.5 mt-6 border rounded-lg dark:border-gray-700">
|
||||
<div class="sm:-mx-0.5 flex">
|
||||
<button class=" focus:outline-none px-3 w-1/2 sm:w-auto py-1 sm:mx-0.5 text-white bg-blue-500 rounded-lg">Monthly</button>
|
||||
<button class=" focus:outline-none px-3 w-1/2 sm:w-auto py-1 sm:mx-0.5 text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 bg-transparent rounded-lg hover:bg-gray-200">Yearly</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 mt-16 -mx-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
|
||||
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Intro</p>
|
||||
<h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$19 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>
|
||||
|
||||
<div class="mt-8 space-y-8">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
|
||||
Choose plan
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
|
||||
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Base</p>
|
||||
<h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$39 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>
|
||||
|
||||
<div class="mt-8 space-y-8">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
|
||||
Choose plan
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 transition-colors duration-200 transform bg-gray-700 rounded-lg dark:bg-gray-600">
|
||||
<p class="text-lg font-medium text-gray-100">Popular</p>
|
||||
<h4 class="mt-2 text-4xl font-semibold text-gray-100">$99 <span class="text-base font-normal text-gray-400">/ Month</span></h4>
|
||||
<p class="mt-4 text-gray-300">For most businesses that want to optimaize web queries.</p>
|
||||
|
||||
<div class="mt-8 space-y-8">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-300">All limited links</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-300">Own analytics platform</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-300">Chat support</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-300">Optimize hashtags</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-300">Unlimited users</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
|
||||
Choose plan
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
|
||||
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Exterprise</p>
|
||||
<h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$199 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>
|
||||
|
||||
<div class="mt-8 space-y-8">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
|
||||
Choose plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- pricing 15 end -->
|
||||
|
||||
<!-- pricing 16 start -->
|
||||
<section class="section_divider">
|
||||
<div>Pricing 16</div>
|
||||
</section>
|
||||
<section class="text-gray-600 body-font dark:bg-gray-800">
|
||||
<div class="container px-5 py-24 mx-auto">
|
||||
<div class="flex flex-col text-center w-full mb-20">
|
||||
<h1 class="sm:text-4xl text-3xl font-medium title-font mb-2 text-gray-900 dark:text-gray-300">Pricing</h1>
|
||||
<p class="lg:w-2/3 mx-auto leading-relaxed text-base dark:text-gray-300">Banh mi cornhole echo park skateboard authentic crucifix neutra tilde lyft biodiesel artisan direct trade mumblecore 3 wolf moon twee</p>
|
||||
</div>
|
||||
<div class="lg:w-2/3 w-full mx-auto overflow-auto">
|
||||
<table class="table-auto w-full text-left whitespace-no-wrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl">Plan</th>
|
||||
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Speed</th>
|
||||
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Storage</th>
|
||||
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Price</th>
|
||||
<th class="w-10 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tr rounded-br"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="px-4 py-3 dark:text-gray-300" >Start</td>
|
||||
<td class="px-4 py-3 dark:text-gray-300">5 Mb/s</td>
|
||||
<td class="px-4 py-3 dark:text-gray-300">15 GB</td>
|
||||
<td class="px-4 py-3 text-lg text-gray-900 dark:text-gray-100">Free</td>
|
||||
<td class="w-10 text-center">
|
||||
<input name="plan" type="radio">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">Pro</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">25 Mb/s</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">25 GB</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-100 px-4 py-3 text-lg text-gray-900">$24</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 w-10 text-center">
|
||||
<input name="plan" type="radio">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">Business</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">36 Mb/s</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">40 GB</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-100 px-4 py-3 text-lg text-gray-900">$50</td>
|
||||
<td class="border-t-2 border-gray-200 dark:text-gray-300 w-10 text-center">
|
||||
<input name="plan" type="radio">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-300 px-4 py-3">Exclusive</td>
|
||||
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-300 px-4 py-3">48 Mb/s</td>
|
||||
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-300 px-4 py-3">120 GB</td>
|
||||
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-100 px-4 py-3 text-lg text-gray-900">$72</td>
|
||||
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-300 w-10 text-center">
|
||||
<input name="plan" type="radio">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="flex pl-4 mt-4 lg:w-2/3 w-full mx-auto">
|
||||
<a class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0">Learn More
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<button class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- pricing 16 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
|
||||
Reference in New Issue
Block a user