Mirrors/tailShape
1
0
Fork 0
mirror of https://github.com/istiyakaminsanto/tailShape.git synced 2025-12-17 12:47:02 +00:00
Code Issues Projects Releases Wiki Activity
Files
master
tailShape/public/template/12_template.html
merajjahir 1821d148e9 added 15 templates
2022-03-05 20:20:27 +06:00

568 lines
40 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en" class="dark">
<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">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<title>Template 12</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- header 8 start -->
<div class="bg-gray-900">
<div x-data="{open_12_template_nav: false}" class="px-4 py-5 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
<div class="relative flex items-center justify-between">
<a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
<svg class="w-8 text-teal-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
<rect x="3" y="1" width="7" height="12"></rect>
<rect x="3" y="17" width="7" height="6"></rect>
<rect x="14" y="1" width="7" height="6"></rect>
<rect x="14" y="11" width="7" height="12"></rect>
</svg>
<span class="ml-2 text-xl font-bold tracking-wide text-gray-100 uppercase">Company</span>
</a>
<ul class="hidden md:block md:flex items-center space-x-8 lg:flex">
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Product</a></li>
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Features</a></li>
<li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Pricing</a></li>
<li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">About us</a></li>
<li>
<a
href="#"
class="inline-flex items-center justify-center h-8 px-4 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-400 hover:bg-purple-700 focus:shadow-outline focus:outline-none"
aria-label="Sign up"
title="Sign up"
>
Sign up
</a>
</li>
</ul>
<!-- Mobile menu -->
<div class="md:hidden">
<button @click="open_12_template_nav= ! open_12_template_nav" aria-label="Open Menu" title="Open Menu" class="p-2 -mr-1 transition duration-200 rounded focus:outline-none focus:shadow-outline">
<svg class="w-5 text-gray-600" viewBox="0 0 24 24">
<path fill="currentColor" d="M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path>
<path fill="currentColor" d="M23,6H1C0.4,6,0,5.6,0,5s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,6,23,6z"></path>
<path fill="currentColor" d="M23,20H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,20,23,20z"></path>
</svg>
</button>
<div x-show="open_12_template_nav" class="absolute top-0 left-0 w-full ">
<div class="p-5 bg-white border rounded shadow-sm">
<div class="flex items-center justify-between mb-4">
<div>
<a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
<svg class="w-8 text-deep-purple-accent-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
<rect x="3" y="1" width="7" height="12"></rect>
<rect x="3" y="17" width="7" height="6"></rect>
<rect x="14" y="1" width="7" height="6"></rect>
<rect x="14" y="11" width="7" height="12"></rect>
</svg>
<span class="ml-2 text-xl font-bold tracking-wide text-gray-800 uppercase">Company</span>
</a>
</div>
<div>
<button @click="open_12_template_nav= false" aria-label="Close Menu" title="Close Menu" class="p-2 -mt-2 -mr-2 transition duration-200 rounded hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
<svg class="w-5 text-gray-600" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z"
></path>
</svg>
</button>
</div>
</div>
<nav>
<ul class="space-y-4">
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-teal-400">Product</a></li>
<li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-teal-400">Features</a></li>
<li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-teal-400">Pricing</a></li>
<li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-teal-400">About us</a></li>
<li>
<a
href="#"
class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-400 hover:bg-purple-700 focus:shadow-outline focus:outline-none"
aria-label="Sign up"
title="Sign up"
>
Sign up
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- header 8 end -->
<!-- hero 8 start -->
<div class=" p-24 flex items-center justify-around dark:bg-gray-800">
<div class="float-left my-6">
<div class="">
<div class="py-2 text-6xl font-bold leading-none text-purple-700">
<h1>Shopping <br>
Made Easier!
</h1>
</div>
<div>
<p class="text-xl text-gray-600">
We've designed the best shopping experience. <br>
Now just one click away!
</p>
</div>
<div class="my-10 flex flex-col md:flex-row ">
<a href="#" class=" m-3 py-4 px-6 font-medium text-white bg-green-500 border-4 border-transparent rounded-lg hover:bg-green-600 ">
<span >Start Shopping</span>
</a>
<a href="#" class="m-3 py-4 px-8 font-medium text-gray-700 bg-gray-300 border-4 border-transparent rounded-lg hover:bg-gray-500">
<span >Learn More</span>
</a>
</div>
</div>
</div>
<div class="float-right px-20 my-8 hidden md:block">
<img class="rounded-lg hover:translate-y-2 transition duration-300" src="https://images.unsplash.com/photo-1557860537-4ca8968f344e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=450&ixid=MnwxfDB8MXxyYW5kb218MHx8c2ltcGxlfHx8fHx8MTY0NTEwNDMyMg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=400" alt="shopping">
<!-- <img src="https://source.unsplash.com/400x450/?simple" alt="shopping"> -->
</div>
</div>
<!-- hero 8 end -->
<!-- start cta 4 -->
<section class=" bg-white dark:bg-gray-800 py-24">
<h2 class="text-center font-bold dark:text-emerald-400 text-gray-800 text-5xl">
CTA
</h2>
<section class="flex flex-col justify-center lg:flex-row lg:space-y-0 lg:space-x-5 space-y-5 py-24 container mx-auto">
<a href="#" class="flex flex-col mx-10 items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
<img class="object-cover h-full w-auto rounded-t-lg md:h-full md:w-48 md:rounded-none md:rounded-l-lg border-l-2 border-black" src="https://source.unsplash.com/random/?productivity,work,tree,fun" alt="">
<div class="flex flex-col justify-between p-4 leading-normal">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</div>
</a>
<a href="#" class="flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
<img class="object-cover h-full w-auto rounded-t-lg md:h-full md:w-48 md:rounded-none md:rounded-l-lg border-l-2 border-black" src="https://source.unsplash.com/random/?productivity,work,tree,fun" alt="">
<div class="flex flex-col justify-between p-4 leading-normal">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</div>
</a>
</section>
</section>
<!-- end cta 4 -->
<!-- feature 8 start -->
<section class="dark:bg-gray-800 dark:text-gray-100 py-24">
<div class="container flex flex-col md:flex-row mx-auto lg:flex-row ">
<div class="my-10 flex flex-col px-6 py-8 space-y-6 rounded-sm sm:p-8 lg:p-12 lg:w-1/2 xl:w-2/5 dark:bg-green-400 dark:text-gray-900">
<div class="flex space-x-2 sm:space-x-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
</svg>
<div class="space-y-2">
<p class="text-lg font-medium leading-snug">Lorem ipsum dolor sit amet</p>
<p class="leading-snug">Praesentium ea et neque distinctio quas eius repudiandae quaerat obcaecati voluptatem similique!</p>
</div>
</div>
<div class="flex space-x-2 sm:space-x-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
</svg>
<div class="space-y-2">
<p class="text-lg font-medium leading-snug">Lorem ipsum dolor sit amet</p>
<p class="leading-snug">Praesentium ea et neque distinctio quas eius repudiandae quaerat obcaecati voluptatem similique!</p>
</div>
</div>
<div class="flex space-x-2 sm:space-x-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
</svg>
<div class="space-y-2">
<p class="text-lg font-medium leading-snug">Lorem ipsum dolor sit amet</p>
<p class="leading-snug">Praesentium ea et neque distinctio quas eius repudiandae quaerat obcaecati voluptatem similique!</p>
</div>
</div>
</div>
<div class="lg:w-1/2 xl:w-3/5 dark:bg-gray-800">
<div class="flex items-center justify-center p-4 md:p-8 lg:p-12">
<img src="https://source.unsplash.com/640x480/" alt="" class="rounded-lg shadow-lg dark:bg-gray-500 aspect-video sm:min-h-96">
</div>
</div>
</div>
</section>
<!-- feature 8 end -->
<!-- pricing 8 start -->
<section x-data="{ selected: 'monthly' }">
<div class="pb-20 bg-gray-100 dark:bg-gray-800 dark:border-b-2 dark:border-cyan-300">
<div class=" max-w-7xl px-4 pt-20 mx-auto text-center sm:text-left">
<h1 class="mb-3 text-4xl font-bold leading-tight text-gray-900 dark:text-gray-100 md:text-5xl md:font-extrabold">Plans & Pricing</h1>
<p class="mb-10 text-lg text-gray-600 dark:text-gray-300 md:text-xl">5 minute installation · Try Team plan features for 14 days · No credit card required</p>
<div class="w-64 mx-auto -mb-2 sm:mx-0">
<div class="flex justify-between p-2 text-center border border-purple-200 rounded-full">
<button class="w-full rounded-full btn btn-primary text-purple-800 focus:text-white active:bg-purple-800 focus:bg-purple-800 text-md font-semibold" @click="selected = 'monthly'" :class="{ 'btn-primary': selected === 'monthly', 'btn-link': selected === 'yearly' }">Bill Monthly</button>
<button class="w-full rounded-full btn btn-link text-purple-800 focus:text-white active:bg-purple-800 focus:bg-purple-800 p-2" @click="selected = 'yearly'" :class="{ 'btn-link': selected === 'monthly', 'btn-primary': selected === 'yearly' }">Bill Yearly</button>
</div>
</div>
</div>
</div>
<div class="dark:bg-gray-800">
<div class="max-w-7xl pb-20 pt-10 mx-auto">
<div class="grid grid-cols-1 gap-16 lg:grid-cols-3 sm:gap-8">
<div class="border-0 rounded-none shadow-none card sm:shadow-md sm:rounded-lg">
<div class="flex flex-col justify-between p-6 border-b border-gray-200">
<p class="mb-1 text-lg font-semibold text-gray-700 dark:text-gray-200 ">Free</p>
<p class="pb-0 my-2 font-mono text-4xl font-extrabold text-gray-900 dark:text-cyan-200 md:pb-2">$0</p>
<a href="#" class="w-full mt-6 p-3 rounded dark:bg-emerald-400 bg-gray-800 text-gray-300 text-center dark:text-gray-800 font-bold md:mt-16">Get Started</a>
</div>
<div class="flex flex-col flex-grow p-6 space-y-3">
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">Email APIs, SMTP Relay, and Webhooks</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">Suppression Management</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">Email Tracking and Analytics</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">99.99% Guaranteed Uptime SLA</p>
</div>
</div>
</div>
<div class="border-0 rounded-none shadow-none card sm:shadow-md sm:rounded-lg">
<div class="flex flex-col justify-between p-6 border-b border-gray-200">
<div>
<p class="mb-1 text-lg font-semibold text-gray-700 dark:text-gray-300">Team</p>
<p class="my-2 font-mono text-4xl font-extrabold text-gray-900 dark:text-cyan-200" x-text="selected === 'monthly' ? '$9' : '$89'">$9</p>
<p class="text-base text-gray-600 dark:text-gray-300" x-text="selected === 'monthly' ? 'user / month' : 'user / year'">user / month</p>
<p class="text-base text-gray-600 dark:text-gray-300" x-text="selected === 'monthly' ? 'billed monthly' : 'billed yearly'">billed monthly</p>
</div>
<a href="#" class="w-full mt-6 p-3 rounded dark:bg-emerald-400 bg-gray-800 text-gray-300 text-center dark:text-gray-800 font-bold ">Try for free</a>
</div>
<div class="flex flex-col flex-grow p-6 space-y-3">
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">Email APIs, SMTP Relay, and Webhooks</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">Suppression Management</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">Email Tracking and Analytics</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">99.99% Guaranteed Uptime SLA</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">5 Days of Log Retention</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">Limited 24/7 Ticket Support</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">1 Dedicated IP (Foundation 100k and up)</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">1,000 Email Address Validations</p>
</div>
</div>
</div>
<div class="border-0 rounded-none shadow-none card sm:shadow-md sm:rounded-lg">
<div class="flex flex-col justify-between p-6 border-b border-gray-200">
<div>
<p class="mb-1 text-lg font-semibold text-gray-700 dark:text-gray-300">Company</p>
<p class="my-2 font-mono text-4xl font-extrabold text-gray-900 dark:text-cyan-200" x-text="selected === 'monthly' ? '$21' : '$189'">$21</p>
<p class="text-base text-gray-600 dark:text-gray-300" x-text="selected === 'monthly' ? 'user / month' : 'user / year'">user / month</p>
<p class="text-base text-gray-600 dark:text-gray-300" x-text="selected === 'monthly' ? 'billed monthly' : 'billed yearly'">billed monthly</p>
</div>
<a href="#" class="w-full mt-6 p-3 rounded dark:bg-emerald-400 bg-gray-800 text-gray-300 text-center dark:text-gray-800 font-bold ">Try for free</a>
</div>
<div class="flex flex-col flex-grow p-6 space-y-3">
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">Email APIs, SMTP Relay, and Webhooks</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">Suppression Management</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">Email Tracking and Analytics</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">99.99% Guaranteed Uptime SLA</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">5 Days of Log Retention</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">Limited 24/7 Ticket Support</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">1 Dedicated IP (Foundation 100k and up)</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">1,000 Email Address Validations</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">Instant Chat Support</p>
</div>
<div class="flex items-start">
<svg viewBox="0 0 20 20" fill="currentColor" class="flex-none w-4 h-4 mt-1 mr-2 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>
<p class="text-gray-700 dark:text-gray-300">Custom Features</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- pricing 8 end -->
<!--footer 8 start-->
<footer class="text-white bg-gray-900 lg:grid lg:grid-cols-5">
<aside class="hidden lg:relative lg:col-span-2 lg:block">
<img class="absolute inset-0 object-cover w-full h-full" src="https://images.unsplash.com/photo-1624456735729-03594a40c5fb" alt="Comic Graphic">
</aside>
<div class="px-4 py-16 sm:px-6 lg:px-8 lg:col-span-3">
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2">
<div>
<p class="font-medium">
<span class="text-xs tracking-widest uppercase">
Call
</span>
<a class="block text-2xl sm:text-3xl hover:opacity-75" href="">
0123456789
</a>
</p>
<ul class="mt-8 space-y-2 text-sm">
<li>Monday to Friday: 10am - 5pm</li>
<li>Weekend: 10am - 3pm</li>
</ul>
<div class="flex mt-16 space-x-3">
<a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
<span class="sr-only"> Facebook </span>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
</svg>
</a>
<a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
<span class="sr-only"> Instagram </span>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
</svg>
</a>
<a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
<span class="sr-only"> Twitter </span>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
<a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
<span class="sr-only"> GitHub </span>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
</svg>
</a>
<a class="p-2 border rounded-full border-white/25 hover:opacity-75" href="" target="_blank" rel="noreferrer">
<span class="sr-only"> Dribbble </span>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<p class="font-medium">
Support
</p>
<nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-300">
<a class="hover:opacity-75" href=""> Contact </a>
<a class="hover:opacity-75" href=""> FAQs </a>
<a class="hover:opacity-75" href=""> Live Chat </a>
<a class="hover:opacity-75" href=""> Forums </a>
</nav>
</div>
<div>
<p class="font-medium">Products</p>
<nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-300">
<a class="hover:opacity-75" href=""> 1to1 Coaching </a>
<a class="hover:opacity-75" href=""> Lesson Plans </a>
<a class="hover:opacity-75" href=""> Meal Plans </a>
<a class="hover:opacity-75" href=""> Gym Sessions </a>
</nav>
</div>
</div>
</div>
<div class="pt-12 mt-12 border-t border-gray-800">
<div class="text-sm text-gray-300 sm:items-center sm:justify-between sm:flex">
<div class="flex space-x-3">
<a class="hover:opacity-75" href=""> Privacy Policy </a>
<a class="hover:opacity-75" href=""> Terms &amp; Conditions </a>
<a class="hover:opacity-75" href=""> Returns Policy </a>
</div>
<p class="mt-4 sm:mt-0">
© 2022 Company Name.
</p>
</div>
<p class="mt-8 text-xs text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus mollitia quia quod repellendus. Porro harum,
odio dolore perspiciatis praesentium provident esse consequatur quibusdam aperiam, cupiditate omnis modi in
quasi? In, maxime odio vel repellat sed earum? Debitis quaerat facilis animi. Odio natus nostrum laboriosam
impedit magnam praesentium asperiores consectetur ipsum.
</p>
</div>
</div>
</footer>
<!--footer 8 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>
Reference in New Issue View Git Blame Copy Permalink