69 lines
3.3 KiB
HTML
69 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<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">
|
|
<title>Meraki UI Components</title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="bg-white dark:bg-gray-900">
|
|
<div class="container px-6 py-8 mx-auto">
|
|
<h1 class="text-2xl font-semibold text-center text-gray-800 capitalize lg:text-3xl dark:text-white">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 xl:mt-12 xl:gap-12 md:grid-cols-2 lg:grid-cols-3">
|
|
<div class="w-full p-8 space-y-8 text-center border border-gray-200 rounded-lg dark:border-gray-700">
|
|
<p class="font-medium text-gray-500 uppercase dark:text-gray-300">Free</p>
|
|
|
|
<h2 class="text-4xl font-semibold text-gray-800 uppercase dark:text-gray-100">
|
|
$0
|
|
</h2>
|
|
|
|
<p class="font-medium text-gray-500 dark:text-gray-300">Life time</p>
|
|
|
|
<button class="w-full px-4 py-2 mt-10 tracking-wide text-white capitalize transition-colors duration-300 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">
|
|
Start Now
|
|
</button>
|
|
</div>
|
|
|
|
<div class="w-full p-8 space-y-8 text-center bg-blue-600 rounded-lg">
|
|
<p class="font-medium text-gray-200 uppercase">Premium</p>
|
|
|
|
<h2 class="text-5xl font-bold text-white uppercase dark:text-gray-100">
|
|
$40
|
|
</h2>
|
|
|
|
<p class="font-medium text-gray-200">Per month</p>
|
|
|
|
<button class="w-full px-4 py-2 mt-10 tracking-wide text-blue-500 capitalize transition-colors duration-300 transform bg-white rounded-md hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:ring focus:ring-gray-200 focus:ring-opacity-80">
|
|
Start Now
|
|
</button>
|
|
</div>
|
|
|
|
<div class="w-full p-8 space-y-8 text-center border border-gray-200 rounded-lg dark:border-gray-700">
|
|
<p class="font-medium text-gray-500 uppercase dark:text-gray-300">Enterprise</p>
|
|
|
|
<h2 class="text-4xl font-semibold text-gray-800 uppercase dark:text-gray-100">
|
|
$100
|
|
</h2>
|
|
|
|
<p class="font-medium text-gray-500 dark:text-gray-300">Life time</p>
|
|
|
|
<button class="w-full px-4 py-2 mt-10 tracking-wide text-white capitalize transition-colors duration-300 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">
|
|
Start Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |