added some client component and blog page
This commit is contained in:
merajjahir
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<html lang="en" class="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
@@ -23,7 +23,7 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* small css for the mobile nav close */
|
||||
#nav-mobile-btn.close span:first-child {
|
||||
transform: rotate(45deg);
|
||||
@@ -31,18 +31,18 @@
|
||||
position: relative;
|
||||
background: #a0aec0;
|
||||
}
|
||||
|
||||
|
||||
#nav-mobile-btn.close span:nth-child(2) {
|
||||
transform: rotate(-45deg);
|
||||
margin-top: 0px;
|
||||
background: #a0aec0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<header class="relative z-50 w-full h-24 overflow-hidden dark:bg-gray-900 ">
|
||||
|
||||
<header class="relative z-50 w-full h-24 overflow-hidden dark:bg-gray-900 ">
|
||||
<div
|
||||
class="container flex items-center justify-center h-full max-w-6xl px-8 mx-auto sm:justify-between xl:px-0">
|
||||
|
||||
|
||||
<a href="/" class="relative flex flex-row items-center h-full font-black leading-none">
|
||||
<svg class="w-auto h-6 text-indigo-600 fill-current" viewBox="0 0 194 116"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
@@ -54,7 +54,7 @@
|
||||
</svg>
|
||||
<span class="ml-3 text-xl text-gray-800 dark:text-red-300">Brand Logo<span class="text-pink-500">.</span></span>
|
||||
</a>
|
||||
|
||||
|
||||
<nav id="nav"
|
||||
class="absolute top-0 left-0 z-50 flex flex-col items-center justify-between hidden w-full h-64 pt-5 mt-24 text-sm text-gray-800 bg-white border-t border-gray-200 md:w-auto md:flex-row md:h-24 lg:text-base md:bg-transparent md:mt-0 md:border-none md:py-0 md:flex md:relative">
|
||||
<a href="#"
|
||||
@@ -72,7 +72,7 @@
|
||||
Started</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div
|
||||
class="absolute left-0 flex-col items-center justify-center hidden w-full pb-8 mt-48 border-b border-gray-200 md:relative md:w-auto md:bg-transparent md:border-none md:mt-0 md:flex-row md:p-0 md:items-end md:flex md:justify-between">
|
||||
<a href="#_"
|
||||
@@ -122,17 +122,17 @@
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="nav-mobile-btn"
|
||||
class="absolute top-0 right-0 z-50 block w-6 mt-8 mr-10 cursor-pointer select-none md:hidden sm:mt-10">
|
||||
<span class="block w-full h-1 mt-2 duration-200 transform bg-gray-800 rounded-full sm:mt-1"></span>
|
||||
<span class="block w-full h-1 mt-1 duration-200 transform bg-gray-800 rounded-full"></span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
if (document.getElementById('nav-mobile-btn')) {
|
||||
document.getElementById('nav-mobile-btn').addEventListener('click', function () {
|
||||
if (this.classList.contains('close')) {
|
||||
@@ -144,7 +144,7 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<!-- header 24 end -->
|
||||
|
||||
@@ -176,117 +176,115 @@
|
||||
|
||||
|
||||
<!-- section 1 start -->
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.accordion-content {
|
||||
transition: max-height 0.3s ease-out, padding 0.3s ease;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="bg-white dark:bg-gray-800 ">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div class="items-center md:flex">
|
||||
|
||||
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div class="items-center md:flex">
|
||||
|
||||
<div class=" grid place-items-center md:place-items-start ">
|
||||
<div class="w-12/12 md:w-6/12 rounded border">
|
||||
<div class="bg-white dark:bg-gray-800 p-10 shadow-sm">
|
||||
<h3 class="text-lg font-medium dark:text-indigo-600 text-gray-800">What We Do? </h3>
|
||||
<p class="text-sm font-light dark:text-gray-100 text-gray-600 my-3">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis cumque laboriosam at dolor ullam aliquam,
|
||||
</p>
|
||||
|
||||
<div class="h-1 w-full mx-auto border-b my-5"></div>
|
||||
|
||||
<!-- What is term -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg ">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>What is term?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dignissimos veritatis beatae qui soluta fugiat dolorem, cumque voluptas at? Debitis error facere nobis distinctio quas provident perferendis pers
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Accordion Wrapper -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>How can it be defined?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis dolorem quisquam aperiam facilis, sapiente quasi alias? At laudantium explicabo corrupti odio ullam sint exercitationem quisquam incidunt odit delectus? Architecto, ratione!
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accordion Wrapper -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>Chamber reached do he nothing be?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo saepe quae quisquam explicabo voluptas eum sapiente maiores, libero fuga ipsam commodi asperiores consectetur aliquam, quia, laborum vero pariatur quasi! Harum?
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" grid place-items-center md:place-items-start drop-shadow-lg dark:drop-shadow-[0_10px_8px_rgba(209,213,219,0.1)] ">
|
||||
<div class="w-12/12 md:w-6/12 rounded-lg ">
|
||||
<div class="bg-white dark:bg-gray-800 p-10 shadow-sm">
|
||||
<h3 class="text-lg font-medium dark:text-indigo-600 text-gray-800">What We Do? </h3>
|
||||
<p class="text-sm font-light dark:text-gray-100 text-gray-600 my-3">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis cumque laboriosam at dolor ullam aliquam,
|
||||
</p>
|
||||
|
||||
|
||||
<div class="mt-8 lg:mt-0 ">
|
||||
<div class="flex items-center justify-center lg:justify-end">
|
||||
<div class="">
|
||||
<!-- https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80 -->
|
||||
<img class="object-cover object-center h-full rounded-md shadow" src="https://source.unsplash.com/random/?tree" alt="">
|
||||
</div>
|
||||
<div class="h-1 w-full mx-auto border-b my-5"></div>
|
||||
|
||||
<!-- What is term -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg ">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>What is term?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dignissimos veritatis beatae qui soluta fugiat dolorem, cumque voluptas at? Debitis error facere nobis distinctio quas provident perferendis pers
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Accordion Wrapper -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>How can it be defined?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis dolorem quisquam aperiam facilis, sapiente quasi alias? At laudantium explicabo corrupti odio ullam sint exercitationem quisquam incidunt odit delectus? Architecto, ratione!
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accordion Wrapper -->
|
||||
<div class="transition hover:bg-indigo-50 rounded-lg">
|
||||
<!-- header -->
|
||||
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
||||
<i class="fas fa-plus"></i>
|
||||
<h3>Chamber reached do he nothing be?</h3>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
||||
<p class="leading-6 font-light pl-9 text-justify">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo saepe quae quisquam explicabo voluptas eum sapiente maiores, libero fuga ipsam commodi asperiores consectetur aliquam, quia, laborum vero pariatur quasi! Harum?
|
||||
</p>
|
||||
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const accordionHeader = document.querySelectorAll(".accordion-header");
|
||||
accordionHeader.forEach((header) => {
|
||||
header.addEventListener("click", () => {
|
||||
const accordionContent = header.parentElement.querySelector(".accordion-content");
|
||||
let accordionMaxHeight = accordionContent.style.maxHeight;
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// Condition handling
|
||||
if (accordionMaxHeight == "0px" || accordionMaxHeight.length == 0) {
|
||||
accordionContent.style.maxHeight = `${accordionContent.scrollHeight + 32}px`;
|
||||
header.querySelector(".fas").classList.remove("fa-plus");
|
||||
header.querySelector(".fas").classList.add("fa-minus");
|
||||
header.parentElement.classList.add("bg-indigo-50");
|
||||
} else {
|
||||
accordionContent.style.maxHeight = `0px`;
|
||||
header.querySelector(".fas").classList.add("fa-plus");
|
||||
header.querySelector(".fas").classList.remove("fa-minus");
|
||||
header.parentElement.classList.remove("bg-indigo-50");
|
||||
}
|
||||
});
|
||||
|
||||
<div class="mt-8 lg:mt-0 ">
|
||||
<div class="flex items-center justify-center lg:justify-end">
|
||||
<div class="">
|
||||
<!-- https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80 -->
|
||||
<img class="object-cover object-center h-full rounded-md shadow" src="https://source.unsplash.com/random/?tree" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const accordionHeader = document.querySelectorAll(".accordion-header");
|
||||
accordionHeader.forEach((header) => {
|
||||
header.addEventListener("click", () => {
|
||||
const accordionContent = header.parentElement.querySelector(".accordion-content");
|
||||
let accordionMaxHeight = accordionContent.style.maxHeight;
|
||||
|
||||
// Condition handling
|
||||
if (accordionMaxHeight == "0px" || accordionMaxHeight.length == 0) {
|
||||
accordionContent.style.maxHeight = `${accordionContent.scrollHeight + 32}px`;
|
||||
header.querySelector(".fas").classList.remove("fa-plus");
|
||||
header.querySelector(".fas").classList.add("fa-minus");
|
||||
header.parentElement.classList.add("bg-indigo-50");
|
||||
} else {
|
||||
accordionContent.style.maxHeight = `0px`;
|
||||
header.querySelector(".fas").classList.add("fa-plus");
|
||||
header.querySelector(".fas").classList.remove("fa-minus");
|
||||
header.parentElement.classList.remove("bg-indigo-50");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
});
|
||||
</script>
|
||||
<!-- section 1 end -->
|
||||
|
||||
|
||||
@@ -356,157 +354,98 @@
|
||||
|
||||
|
||||
|
||||
<!-- pricing 18 start -->
|
||||
<!-- pricing 18 start -->
|
||||
|
||||
<div class="relative px-8 py-10 bg-white dark:bg-gray-800 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
|
||||
<div class="relative px-8 py-10 bg-white dark:bg-gray-800 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
|
||||
|
||||
<div id="pricing" class="container flex flex-col items-center h-full max-w-6xl mx-auto">
|
||||
<h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our Pricing</h2>
|
||||
<h3
|
||||
class="w-full max-w-2xl px-5 px-8 mt-2 text-2xl font-black leading-tight text-center dark:text-indigo-600 text-gray-900 sm:mt-0 sm:px-0 sm:text-6xl md:px-0">
|
||||
Simple, Transparent Pricing for Everyone</h3>
|
||||
<div id="pricing" class="container flex flex-col items-center h-full max-w-6xl mx-auto">
|
||||
<h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our Pricing</h2>
|
||||
<h3
|
||||
class="w-full max-w-2xl px-5 px-8 mt-2 text-2xl font-black leading-tight text-center dark:text-indigo-600 text-gray-900 sm:mt-0 sm:px-0 sm:text-6xl md:px-0">
|
||||
Simple, Transparent Pricing for Everyone</h3>
|
||||
|
||||
<div class="max-w-full mx-auto md:max-w-6xl sm:px-8">
|
||||
<!-- Basic Pricing -->
|
||||
<div class="relative flex flex-col items-center block sm:flex-row">
|
||||
<div
|
||||
class="relative z-0 w-11/12 max-w-sm my-8 border border-gray-200 rounded-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-mr-4">
|
||||
<div class="overflow-hidden text-black bg-white border-t border-gray-100 rounded-lg shadow-sm">
|
||||
<div
|
||||
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
|
||||
<h3 class="p-3 text-lg font-bold tracking-wide text-center uppercase">Basic<span
|
||||
class="ml-2 font-light">Plan</span></h3>
|
||||
<h4
|
||||
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
|
||||
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>48</h4>
|
||||
<p class="text-sm text-gray-600">In our basic plan you can take advantage of all these
|
||||
features below.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap px-6 mt-8">
|
||||
<ul>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Awesome Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">And Another Cool Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">One More Feature</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex items-center block p-8 uppercase">
|
||||
<a href="#_"
|
||||
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
|
||||
This Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pro Pricing -->
|
||||
<div
|
||||
class="relative z-10 w-full max-w-md my-8 bg-white rounded-lg shadow-lg sm:w-2/3 lg:w-1/3 sm:my-5">
|
||||
<div class="max-w-full mx-auto md:max-w-6xl sm:px-8">
|
||||
<!-- Basic Pricing -->
|
||||
<div class="relative flex flex-col items-center block sm:flex-row">
|
||||
<div
|
||||
class="py-4 text-sm font-semibold leading-none tracking-wide text-center text-white uppercase bg-indigo-500 rounded-t">
|
||||
Most Popular</div>
|
||||
<div class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
|
||||
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Pro<span
|
||||
class="ml-2 font-light">Plan</span></h3>
|
||||
<h4
|
||||
class="flex items-center justify-center pb-6 text-5xl font-bold text-center text-gray-900">
|
||||
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>98</h4>
|
||||
<p class="text-sm text-gray-600">Our most popular package is the Pro Plan which gives you
|
||||
access to the
|
||||
following:</p>
|
||||
</div>
|
||||
<div class="flex justify-start pl-12 mt-8 sm:justify-start">
|
||||
<ul>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Really Cool Features</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Another Cool Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">And One More</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
class="relative z-0 w-11/12 max-w-sm my-8 border border-gray-200 rounded-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-mr-4">
|
||||
<div class="overflow-hidden text-black bg-white border-t border-gray-100 rounded-lg shadow-sm">
|
||||
<div
|
||||
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
|
||||
<h3 class="p-3 text-lg font-bold tracking-wide text-center uppercase">Basic<span
|
||||
class="ml-2 font-light">Plan</span></h3>
|
||||
<h4
|
||||
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
|
||||
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>48</h4>
|
||||
<p class="text-sm text-gray-600">In our basic plan you can take advantage of all these
|
||||
features below.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center block p-8 uppercase">
|
||||
<a href="#_"
|
||||
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-indigo-600">Select
|
||||
This Plan</a>
|
||||
<div class="flex flex-wrap px-6 mt-8">
|
||||
<ul>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Awesome Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">And Another Cool Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">One More Feature</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex items-center block p-8 uppercase">
|
||||
<a href="#_"
|
||||
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
|
||||
This Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Premium Pricing -->
|
||||
<div
|
||||
class="relative z-0 w-11/12 max-w-sm my-8 rounded-lg shadow-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-ml-4">
|
||||
<div class="overflow-hidden text-black bg-white rounded-lg shadow-lg shadow-inner">
|
||||
<!-- Pro Pricing -->
|
||||
<div
|
||||
class="relative z-10 w-full max-w-md my-8 bg-white rounded-lg shadow-lg sm:w-2/3 lg:w-1/3 sm:my-5">
|
||||
<div
|
||||
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-8">
|
||||
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Premium<span
|
||||
class="py-4 text-sm font-semibold leading-none tracking-wide text-center text-white uppercase bg-indigo-500 rounded-t">
|
||||
Most Popular</div>
|
||||
<div class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
|
||||
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Pro<span
|
||||
class="ml-2 font-light">Plan</span></h3>
|
||||
<h4
|
||||
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
|
||||
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>78</h4>
|
||||
<p class="pl-2 text-sm text-gray-600">With our premium plan you can take advantage of
|
||||
all the following
|
||||
features:</p>
|
||||
class="flex items-center justify-center pb-6 text-5xl font-bold text-center text-gray-900">
|
||||
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>98</h4>
|
||||
<p class="text-sm text-gray-600">Our most popular package is the Pro Plan which gives you
|
||||
access to the
|
||||
following:</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap px-8 mt-8">
|
||||
<div class="flex justify-start pl-12 mt-8 sm:justify-start">
|
||||
<ul>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
@@ -514,7 +453,7 @@
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Totally Tubular Feature</span>
|
||||
<span class="ml-3 text-lg text-gray-700">Really Cool Features</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
@@ -525,7 +464,7 @@
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Super Cool Feature</span>
|
||||
<span class="ml-3 text-lg text-gray-700">Another Cool Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
@@ -543,20 +482,79 @@
|
||||
|
||||
<div class="flex items-center block p-8 uppercase">
|
||||
<a href="#_"
|
||||
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
|
||||
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-indigo-600">Select
|
||||
This Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Premium Pricing -->
|
||||
<div
|
||||
class="relative z-0 w-11/12 max-w-sm my-8 rounded-lg shadow-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-ml-4">
|
||||
<div class="overflow-hidden text-black bg-white rounded-lg shadow-lg shadow-inner">
|
||||
<div
|
||||
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-8">
|
||||
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Premium<span
|
||||
class="ml-2 font-light">Plan</span></h3>
|
||||
<h4
|
||||
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
|
||||
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>78</h4>
|
||||
<p class="pl-2 text-sm text-gray-600">With our premium plan you can take advantage of
|
||||
all the following
|
||||
features:</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap px-8 mt-8">
|
||||
<ul>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Totally Tubular Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">Super Cool Feature</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<div class="p-2 text-green-500 rounded-full fill-current ">
|
||||
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="ml-3 text-lg text-gray-700">And One More</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center block p-8 uppercase">
|
||||
<a href="#_"
|
||||
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
|
||||
This Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- pricing 18 end -->
|
||||
|
||||
<!-- pricing 18 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user