truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
truncgilcom
citrus/public/docs/blocks/pricing.html
T
Ümit Tunç 0ca75829bb frontend style fix
2026-01-01 16:25:27 +03:00

1473 lines
157 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/docs/blocks/pricing by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:39 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
<meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
<meta name="author" content="elemis">
<title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
<link rel="shortcut icon" href="../../assets/img/favicon.png">
<link rel="stylesheet" type="text/css" href="../../assets/fonts/unicons/unicons.css">
<link rel="stylesheet" href="../../assets/css/plugins.css">
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<div class="grow shrink-0">
<header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
<div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
<div class="navbar-brand w-full">
<a href='../../index.html'>
<img src="../../assets/img/truncgil-yatay.svg" alt="image">
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
<button type="button" class="btn-close btn-close-white !mr-[-0.75rem] m-0 p-0 leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out border-0 motion-reduce:transition-none before:text-[1.05rem] before:text-white before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(255,255,255,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul class="navbar-nav">
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
<li class="mega-menu-content mega-menu-scroll">
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo1.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi1.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 1</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo2.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi2.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 2</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo3.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi3.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 3</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo4.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi4.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 4</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo5.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi5.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 5</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo6.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi6.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 6</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo7.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi7.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 7</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo8.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi8.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 8</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo9.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi9.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 9</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo10.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi10.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 10</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo11.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi11.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 11</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo12.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi12.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 12</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo13.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi13.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 13</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo14.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi14.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 14</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo15.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi15.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 15</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo16.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi16.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 16</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo17.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi17.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 17</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo18.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi18.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 18</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo19.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi19.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 19</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo20.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi20.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 20</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo21.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi21.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 21</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo22.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi22.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 22</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo23.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi23.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 23</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo24.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi24.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 24</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo25.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi25.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 25</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo26.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi26.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 26</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo27.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi27.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 27</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo28.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi28.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 28</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo29.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi29.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 29</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo30.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi30.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 30</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo31.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi31.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 31</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo32.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi32.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 32</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo33.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi33.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 33</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='../../demo34.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi34.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 34</span>
</a>
</li>
</ul>
<!--/.row -->
<span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../services.html'>Services I</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../services2.html'>Services II</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../about.html'>About I</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../about2.html'>About II</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../shop.html'>Shop I</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../shop2.html'>Shop II</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../shop-product.html'>Product Page</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../shop-cart.html'>Shopping Cart</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../shop-checkout.html'>Checkout</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../contact.html'>Contact I</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../contact2.html'>Contact II</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../contact3.html'>Contact III</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../career.html'>Job Listing I</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../career2.html'>Job Listing II</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../career-job.html'>Job Description</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../404.html'>404 Not Found</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../page-loader.html'>Page Loader</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../signin.html'>Sign In I</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../signin2.html'>Sign In II</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../signup.html'>Sign Up I</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../signup2.html'>Sign Up II</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../terms.html'>Terms</a></li>
</ul>
</li>
<li class="nav-item"><a class='dropdown-item' href='../../pricing.html'>Pricing</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../onepage.html'>One Page</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">Project Pages</h6>
<ul class="pl-0 list-none">
<li><a class='dropdown-item' href='../../projects.html'>Projects I</a></li>
<li><a class='dropdown-item' href='../../projects2.html'>Projects II</a></li>
<li><a class='dropdown-item' href='../../projects3.html'>Projects III</a></li>
<li><a class='dropdown-item' href='../../projects4.html'>Projects IV</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Single Projects</h6>
<ul class="pl-0 list-none">
<li><a class='dropdown-item' href='../../single-project.html'>Single Project I</a></li>
<li><a class='dropdown-item' href='../../single-project2.html'>Single Project II</a></li>
<li><a class='dropdown-item' href='../../single-project3.html'>Single Project III</a></li>
<li><a class='dropdown-item' href='../../single-project4.html'>Single Project IV</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../blog.html'>Blog without Sidebar</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../blog2.html'>Blog with Sidebar</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../blog3.html'>Blog with Left Sidebar</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item' href='../../blog-post.html'>Post without Sidebar</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../blog-post2.html'>Post with Sidebar</a></li>
<li class="nav-item"><a class='dropdown-item' href='../../blog-post3.html'>Post with Left Sidebar</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
<li class="mega-menu-content">
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='about.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block1.svg" alt="image"></div>
<span>About</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='blog.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block2.svg" alt="image"></div>
<span>Blog</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='call-to-action.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block3.svg" alt="image"></div>
<span>Call to Action</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='clients.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block4.svg" alt="image"></div>
<span>Clients</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='contact.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block5.svg" alt="image"></div>
<span>Contact</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='facts.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block6.svg" alt="image"></div>
<span>Facts</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='faq.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block7.svg" alt="image"></div>
<span>FAQ</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='features.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block8.svg" alt="image"></div>
<span>Features</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='footer.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block9.svg" alt="image"></div>
<span>Footer</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='hero.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block10.svg" alt="image"></div>
<span>Hero</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='misc.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block17.svg" alt="image"></div>
<span>Misc</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='navbar.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block11.svg" alt="image"></div>
<span>Navbar</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='portfolio.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block12.svg" alt="image"></div>
<span>Portfolio</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='pricing.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block13.svg" alt="image"></div>
<span>Pricing</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='process.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block14.svg" alt="image"></div>
<span>Process</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='team.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block15.svg" alt="image"></div>
<span>Team</span>
</a>
</li>
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='testimonials.html'>
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block16.svg" alt="image"></div>
<span>Testimonials</span>
</a>
</li>
</ul>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
<h6 class="dropdown-header">Usage</h6>
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 xl:pb-1 lg:pb-1">
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../index.html'>Get Started</a></li>
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../forms.html'>Forms</a></li>
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../faq.html'>FAQ</a></li>
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../changelog.html'>Changelog</a></li>
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../credits.html'>Credits</a></li>
</ul>
<h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 ">
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/colors.html'>Colors</a></li>
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/fonts.html'>Fonts</a></li>
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
<h6 class="dropdown-header">Elements</h6>
<ul class="pl-0 list-none xl:columns-3 lg:columns-3 ">
<li><a class='dropdown-item' href='../elements/accordion.html'>Accordion</a></li>
<li><a class='dropdown-item' href='../elements/alerts.html'>Alerts</a></li>
<li><a class='dropdown-item' href='../elements/animations.html'>Animations</a></li>
<li><a class='dropdown-item' href='../elements/avatars.html'>Avatars</a></li>
<li><a class='dropdown-item' href='../elements/background.html'>Background</a></li>
<li><a class='dropdown-item' href='../elements/badges.html'>Badges</a></li>
<li><a class='dropdown-item' href='../elements/buttons.html'>Buttons</a></li>
<li><a class='dropdown-item' href='../elements/card.html'>Card</a></li>
<li><a class='dropdown-item' href='../elements/carousel.html'>Carousel</a></li>
<li><a class='dropdown-item' href='../elements/dividers.html'>Dividers</a></li>
<li><a class='dropdown-item' href='../elements/form-elements.html'>Form Elements</a></li>
<li><a class='dropdown-item' href='../elements/image-hover.html'>Image Hover</a></li>
<li><a class='dropdown-item' href='../elements/image-mask.html'>Image Mask</a></li>
<li><a class='dropdown-item' href='../elements/lightbox.html'>Lightbox</a></li>
<li><a class='dropdown-item' href='../elements/player.html'>Media Player</a></li>
<li><a class='dropdown-item' href='../elements/modal.html'>Modal</a></li>
<li><a class='dropdown-item' href='../elements/pagination.html'>Pagination</a></li>
<li><a class='dropdown-item' href='../elements/progressbar.html'>Progressbar</a></li>
<li><a class='dropdown-item' href='../elements/shadows.html'>Shadows</a></li>
<li><a class='dropdown-item' href='../elements/shapes.html'>Shapes</a></li>
<li><a class='dropdown-item' href='../elements/tables.html'>Tables</a></li>
<li><a class='dropdown-item' href='../elements/tabs.html'>Tabs</a></li>
<li><a class='dropdown-item' href='../elements/text-animations.html'>Text Animations</a></li>
<li><a class='dropdown-item' href='../elements/text-highlight.html'>Text Highlight</a></li>
<li><a class='dropdown-item' href='../elements/tiles.html'>Tiles</a></li>
<li><a class='dropdown-item' href='../elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li><a class='dropdown-item' href='../elements/typography.html'>Typography</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white !mt-4">
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-full !flex !ml-auto">
<ul class="navbar-nav !flex-row !items-center !ml-auto">
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
</header>
<!-- /header -->
<section class="wrapper !bg-[#edf2fc]">
<div class="container pt-10 pb-14 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24 !text-center">
<div class="flex flex-wrap mx-[-15px]">
<div class="md:w-9/12 lg:w-7/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">Blocks - Pricing</h1>
<p class="lead xxl:!px-[2.5rem] !leading-[1.65] text-[0.9rem] font-medium">Copy any custom block snippet below and paste it on your page to build your website easily.</p>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container py-12">
<h2 class="h5">Filter Blocks:</h2>
<ul class="pl-0 list-none !mb-0">
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='about.html'>About</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='blog.html'>Blog</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='call-to-action.html'>Call to Action</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='clients.html'>Clients</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='contact.html'>Contact</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='facts.html'>Facts</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='faq.html'>FAQ</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='features.html'>Features</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='footer.html'>Footer</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='hero.html'>Hero</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='misc.html'>Misc</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='navbar.html'>Navbar</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='portfolio.html'>Portfolio</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded !text-[#e31e24] pointer-events-none' href='pricing.html'>Pricing</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='process.html'>Process</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='team.html'>Team</a></li>
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='testimonials.html'>Testimonials</a></li>
</ul>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-1" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="flex flex-wrap mx-[-15px] !mt-[-30px]">
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] xl:!mt-32 lg:!mt-32 !mb-3">Our Pricing</h2>
<p class="lead !text-[1.05rem] !leading-[1.6] font-medium">We offer <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[30%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[9%] motion-reduce:after:transition-none after:bg-[rgba(63,120,224,.12)]">great prices</span>, premium and quality products for your business.</p>
<p>Enjoy a <a href="#" class="hover">free 30-day trial</a> and experience the full service. No credit card required!</p>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mt-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">See All Prices</a>
</div>
<!--/column -->
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] pricing-wrapper !mt-[30px]">
<div class="flex flex-wrap items-center switcher xl:!justify-end lg:!justify-end">
<p class="!mb-0 !pr-[.75rem]">Monthly</p>
<div class="pricing-switchers w-8 h-4 clear-both !text-center !relative bg-[rgba(30,34,40,0.07)] !box-content rounded-3xl border-[0.2rem] border-solid border-transparent">
<div class="pricing-switcher pricing-switcher-active cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase !text-white"></div>
<div class="pricing-switcher cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase"></div>
<div class="h-4 w-4 block absolute z-[555] transition-[0.3s] duration-[ease-in-out] m-0 rounded-[100%] border-[none] left-0 top-0 !bg-[rgba(63,120,224)] opacity-100 switcher-button"></div>
</div>
<p class="!mb-0 !pl-3 !relative">Yearly <span class="!text-[#e2626b]">(Save 30%)</span></p>
</div>
<div class="flex flex-wrap mx-[-15px] !mt-[25px] !relative">
<div class="shape bg-dot primary rellax !w-[6rem] !h-[8rem] bg-[radial-gradient(#e31e24_2px,transparent_2.5px)] !absolute !z-[1] opacity-50 !px-[15px] !mt-[30px]" data-rellax-speed="1" style="bottom: -0.5rem; right: -1.6rem;"></div>
<div class="shape !rounded-[50%] bg-line red rellax !w-[8rem] !h-[8rem] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: -1rem; left: -2rem;"></div>
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="pricing card">
<div class="card-body pb-14">
<div class="prices !text-[#343f52]">
<div class="price price-show !justify-start"><span class="price-currency">$</span><span class="price-value">19</span> <span class="price-duration">mo</span></div>
<div class="price price-hide price-hidden !justify-start"><span class="price-currency">$</span><span class="price-value">199</span> <span class="price-duration">yr</span></div>
</div>
<!--/.prices -->
<h4 class="card-title !mt-2">Premium Plan</h4>
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>5</strong> Projects </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>100K</strong> API Access </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>200MB</strong> Storage </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> Weekly <strong>Reports</strong></span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"></i><span> 7/24 <strong>Support</strong></span></li>
</ul>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Choose Plan</a>
</div>
<!--/.card-body -->
</div>
<!--/.pricing -->
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full popular !mt-[30px]">
<div class="pricing card">
<div class="card-body pb-14">
<div class="prices !text-[#343f52]">
<div class="price price-show !justify-start"><span class="price-currency">$</span><span class="price-value">49</span> <span class="price-duration">mo</span></div>
<div class="price price-hide price-hidden !justify-start"><span class="price-currency">$</span><span class="price-value">499</span> <span class="price-duration">yr</span></div>
</div>
<!--/.prices -->
<h4 class="card-title !mt-2">Corporate Plan</h4>
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>20</strong> Projects </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>300K</strong> API Access </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>500MB</strong> Storage </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> Weekly <strong>Reports</strong></span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> 7/24 <strong>Support</strong></span></li>
</ul>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Choose Plan</a>
</div>
<!--/.card-body -->
</div>
<!--/.pricing -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-1">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-1" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="flex flex-wrap mx-[-15px] !mt-[-30px]"&#62;
&#60;div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] xl:!mt-32 lg:!mt-32 !mb-3"&#62;Our Pricing&#60;/h2&#62;
&#60;p class="lead !text-[1.05rem] !leading-[1.6] font-medium"&#62;We offer &#60;span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[30%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[9%] motion-reduce:after:transition-none after:bg-[rgba(63,120,224,.12)]"&#62;great prices&#60;/span&#62;, premium and quality products for your business.&#60;/p&#62;
&#60;p&#62;Enjoy a &#60;a href="#" class="hover"&#62;free 30-day trial&#60;/a&#62; and experience the full service. No credit card required!&#60;/p&#62;
&#60;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mt-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"&#62;See All Prices&#60;/a&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] pricing-wrapper !mt-[30px]"&#62;
&#60;div class="flex flex-wrap items-center switcher xl:!justify-end lg:!justify-end"&#62;
&#60;p class="!mb-0 !pr-[.75rem]"&#62;Monthly&#60;/p&#62;
&#60;div class="pricing-switchers w-8 h-4 clear-both !text-center !relative bg-[rgba(30,34,40,0.07)] !box-content rounded-3xl border-[0.2rem] border-solid border-transparent"&#62;
&#60;div class="pricing-switcher pricing-switcher-active cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase !text-white"&#62;&#60;/div&#62;
&#60;div class="pricing-switcher cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase"&#62;&#60;/div&#62;
&#60;div class="h-4 w-4 block absolute z-[555] transition-[0.3s] duration-[ease-in-out] m-0 rounded-[100%] border-[none] left-0 top-0 !bg-[rgba(63,120,224)] opacity-100 switcher-button"&#62;&#60;/div&#62;
&#60;/div&#62;
&#60;p class="!mb-0 !pl-3 !relative"&#62;Yearly &#60;span class="!text-[#e2626b]"&#62;(Save 30%)&#60;/span&#62;&#60;/p&#62;
&#60;/div&#62;
&#60;div class="flex flex-wrap mx-[-15px] !mt-[25px] !relative"&#62;
&#60;div class="shape bg-dot primary rellax !w-[6rem] !h-[8rem] bg-[radial-gradient(#e31e24_2px,transparent_2.5px)] !absolute !z-[1] opacity-50 !px-[15px] !mt-[30px]" data-rellax-speed="1" style="bottom: -0.5rem; right: -1.6rem;"&#62;&#60;/div&#62;
&#60;div class="shape !rounded-[50%] bg-line red rellax !w-[8rem] !h-[8rem] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: -1rem; left: -2rem;"&#62;&#60;/div&#62;
&#60;div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="pricing card"&#62;
&#60;div class="card-body pb-14"&#62;
&#60;div class="prices !text-[#343f52]"&#62;
&#60;div class="price price-show !justify-start"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;19&#60;/span&#62; &#60;span class="price-duration"&#62;mo&#60;/span&#62;&#60;/div&#62;
&#60;div class="price price-hide price-hidden !justify-start"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;199&#60;/span&#62; &#60;span class="price-duration"&#62;yr&#60;/span&#62;&#60;/div&#62;
&#60;/div&#62;
&#60;!--/.prices --&#62;
&#60;h4 class="card-title !mt-2"&#62;Premium Plan&#60;/h4&#62;
&#60;ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8"&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;5&#60;/strong&#62; Projects &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;100K&#60;/strong&#62; API Access &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;200MB&#60;/strong&#62; Storage &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; Weekly &#60;strong&#62;Reports&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; 7/24 &#60;strong&#62;Support&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;/ul&#62;
&#60;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"&#62;Choose Plan&#60;/a&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.pricing --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full popular !mt-[30px]"&#62;
&#60;div class="pricing card"&#62;
&#60;div class="card-body pb-14"&#62;
&#60;div class="prices !text-[#343f52]"&#62;
&#60;div class="price price-show !justify-start"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;49&#60;/span&#62; &#60;span class="price-duration"&#62;mo&#60;/span&#62;&#60;/div&#62;
&#60;div class="price price-hide price-hidden !justify-start"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;499&#60;/span&#62; &#60;span class="price-duration"&#62;yr&#60;/span&#62;&#60;/div&#62;
&#60;/div&#62;
&#60;!--/.prices --&#62;
&#60;h4 class="card-title !mt-2"&#62;Corporate Plan&#60;/h4&#62;
&#60;ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8"&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;20&#60;/strong&#62; Projects &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;300K&#60;/strong&#62; API Access &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;500MB&#60;/strong&#62; Storage &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; Weekly &#60;strong&#62;Reports&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; 7/24 &#60;strong&#62;Support&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;/ul&#62;
&#60;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"&#62;Choose Plan&#60;/a&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.pricing --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;/div&#62;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-2" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="flex flex-wrap mx-[-15px]">
<div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
<h2 class="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35]">Our Pricing</h2>
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-[5rem] xl:!mb-6 lg:!mb-6 md:!mb-6 lg:!px-10 xl:!px-10">We offer great prices, premium products and quality service for your business.</h3>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="pricing-wrapper !relative">
<div class="shape bg-dot primary rellax !w-[6rem] !h-[8rem] bg-[radial-gradient(#e31e24_2px,transparent_2.5px)] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: 2rem; right: -2.4rem;"></div>
<div class="shape !rounded-[50%] bg-line red rellax !w-[8rem] !h-[8rem] hidden xl:block lg:block absolute z-[1] opacity-50" data-rellax-speed="1" style="bottom: 0.5rem; left: -2.5rem;"></div>
<div class="flex flex-wrap items-center justify-center switcher">
<p class="!mb-0 !pr-[.75rem]">Monthly</p>
<div class="pricing-switchers w-8 h-4 clear-both !text-center !relative bg-[rgba(30,34,40,0.07)] !box-content rounded-3xl border-[0.2rem] border-solid border-transparent">
<div class="pricing-switcher pricing-switcher-active cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase !text-white"></div>
<div class="pricing-switcher cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase"></div>
<div class="h-4 w-4 block absolute z-[555] transition-[0.3s] duration-[ease-in-out] m-0 rounded-[100%] border-[none] left-0 top-0 !bg-[rgba(63,120,224)] opacity-100 switcher-button"></div>
</div>
<p class="!mb-0 !pl-3 !relative">Yearly</p>
</div>
<div class="flex flex-wrap mx-[-15px] !mt-3 xl:!mt-5 lg:!mt-5 md:!mt-5">
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="pricing card !text-center">
<div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 412.9" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/shopping-basket.svg" class="svg-inject icon-svg text-[#e31e24] !mb-3 !w-[2.6rem] !h-[2.6rem] m-[0_auto]"><path class="lineal-fill" d="M453.8 238.1l-9.6 76.3H67.8l-9.6-76.3z"></path><circle class="lineal-fill" cx="178.1" cy="149.9" r="35.1"></circle><circle class="lineal-fill" cx="333.9" cy="149.9" r="35.1"></circle><path class="lineal-stroke" d="M498.6 136.5h-60.2c-7.4-.2-13.6 5.7-13.8 13.1-.2 7.4 5.7 13.6 13.1 13.8h11.8l-7.5 61.3H70.1l-7.5-61.3h68.9c7.4 25.7 34.3 40.6 60 33.1 16-4.6 28.5-17.1 33.1-33.1h62.6c7.4 25.7 34.3 40.6 60 33.2 25.7-7.4 40.6-34.3 33.2-60-4.9-17.1-18.9-30.1-36.3-33.9l-39-94.2c-2.8-6.9-10.7-10.1-17.6-7.3s-10.1 10.7-7.3 17.6l35.7 86.2c-14 5.5-24.6 17.2-28.8 31.6h-62.6c-4.2-14.4-14.8-26.1-28.8-31.7l35.7-86.2c2.8-6.9-.4-14.7-7.3-17.6s-14.7.4-17.6 7.3l-39.1 94.2c-17.4 3.8-31.3 16.9-36.2 33.9H13.4C6 136.7.1 142.9.3 150.3c.2 7.1 5.9 12.9 13.1 13.1h22.1l29.8 237.8c.9 6.7 6.6 11.8 13.3 11.8h354.8c6.8 0 12.5-5 13.3-11.8l29.8-237.8h22c7.4-.2 13.3-6.4 13.1-13.8-.2-7.2-5.9-12.9-13-13.1zm-165-8.2c.4 0 .9.1 1.3.1h.7c11.9.9 20.8 11.3 19.9 23.2-.9 11.9-11.3 20.8-23.2 19.9-11.9-.9-20.8-11.3-19.9-23.2.8-11.1 10-19.7 21.2-20zm-157.1.1h.7c.4 0 .9-.1 1.3-.1 11.9.2 21.4 10 21.3 22-.2 11.9-10 21.4-22 21.3-11.9-.2-21.4-10-21.3-22 .2-11.2 8.9-20.4 20-21.2zm-103 123.1h365.1l-6.3 49.5H79.7l-6.2-49.5zM90.4 386L83 327.9h345.9l-7.4 58.1H90.4z"></path></svg>
<h4 class="card-title">Basic Plan</h4>
<div class="prices !text-[#343f52]">
<div class="price price-show"><span class="price-currency">$</span><span class="price-value">9</span> <span class="price-duration">mo</span></div>
<div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">99</span> <span class="price-duration">yr</span></div>
</div>
<!--/.prices -->
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8 text-left">
<li class="relative !pl-6"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>1</strong> Project </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>100K</strong> API Access </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>100MB</strong> Storage </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"></i><span> Weekly <strong>Reports</strong> </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"></i><span> 7/24 <strong>Support</strong></span></li>
</ul>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Choose Plan</a>
</div>
<!--/.card-body -->
</div>
<!--/.pricing -->
</div>
<!--/column -->
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full popular !mt-[30px]">
<div class="pricing card !text-center">
<div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 479.8 512" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/home.svg" class="svg-inject icon-svg text-[#e31e24] !mb-3 !w-[2.6rem] !h-[2.6rem] m-[0_auto]"><path class="lineal-stroke" d="M308 512H61.9c-8 0-14.4-6.5-14.4-14.4V227.2c0-4.3 2-8.4 5.4-11.2l178-143.7c5.3-4.3 12.8-4.3 18.1 0L427 216c3.4 2.7 5.4 6.9 5.4 11.2v269.6c-.2 8-6.8 14.3-14.8 14-7.7-.2-13.8-6.4-14-14V234.1L239.9 102 76.3 234.1v249.1H308c8 .2 14.3 6.8 14 14.8-.2 7.6-6.3 13.8-14 14z"></path><path class="lineal-stroke" d="M465.4 209.8c-3.3 0-6.4-1.1-9-3.2L239.9 32.9 23.5 206.7c-6.2 5-15.3 4-20.3-2.2s-4-15.3 2.2-20.3l225.5-181c5.3-4.2 12.8-4.2 18.1 0l225.5 181c6.2 5 7.2 14.1 2.2 20.3-2.8 3.3-6.9 5.3-11.3 5.3z"></path><ellipse transform="rotate(-80.781 239.904 207.686)" class="lineal-fill" cx="239.9" cy="207.7" rx="42.9" ry="43"></ellipse><path class="lineal-stroke" d="M239.9 265.1c-31.7 0-57.4-25.7-57.4-57.4s25.7-57.4 57.4-57.4 57.4 25.7 57.4 57.4c-.1 31.7-25.7 57.3-57.4 57.4zm0-85.9c-15.8 0-28.5 12.8-28.5 28.5s12.8 28.5 28.5 28.5 28.5-12.8 28.5-28.5c0-15.8-12.8-28.5-28.5-28.5z"></path><path class="lineal-fill" d="M171.8 325.7h136.1v171.9H171.8z"></path><path class="lineal-stroke" d="M308 512H171.8c-8 0-14.4-6.5-14.4-14.4V325.7c0-8 6.5-14.4 14.4-14.4H308c8 0 14.4 6.5 14.4 14.4v171.9c0 7.9-6.4 14.4-14.4 14.4zm-121.8-28.9h107.3v-143H186.2v143zm234.2-317.7c-7.9 0-14.4-6.5-14.4-14.4V73.3h-28.6c-8 0-14.4-6.5-14.4-14.4s6.5-14.4 14.4-14.4h43c8 0 14.4 6.5 14.4 14.4v92c0 8-6.4 14.4-14.4 14.5 0-.1 0 0 0 0z"></path></svg>
<h4 class="card-title">Premium Plan</h4>
<div class="prices !text-[#343f52]">
<div class="price price-show"><span class="price-currency">$</span><span class="price-value">19</span> <span class="price-duration">mo</span></div>
<div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">199</span> <span class="price-duration">yr</span></div>
</div>
<!--/.prices -->
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8 text-left">
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>5</strong> Projects </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>100K</strong> API Access </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>200MB</strong> Storage </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> Weekly <strong>Reports</strong></span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"></i><span> 7/24 <strong>Support</strong></span></li>
</ul>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Choose Plan</a>
</div>
<!--/.card-body -->
</div>
<!--/.pricing -->
</div>
<!--/column -->
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 md:!ml-[25%] w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-0 lg:!ml-0 !mt-[30px]">
<div class="pricing card !text-center">
<div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 380.8" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/briefcase-2.svg" class="svg-inject icon-svg text-[#e31e24] !mb-3 !w-[2.6rem] !h-[2.6rem] m-[0_auto]"><path class="lineal-stroke" d="M299.9 104.7h-23.8V56.5c0-18.1-14.6-32.7-32.7-32.7h-77.2c-18 0-32.7 14.7-32.7 32.7v48.2h-23.8V56.5C109.8 25.3 135 0 166.2 0h77.2c31.2 0 56.4 25.3 56.5 56.5v48.2z"></path><path class="lineal-stroke" d="M360.5 380.8H49.1c-27.1 0-49-22-49.1-49.1V119.1C0 92 22 70 49.1 70h311.5c27.1 0 49 22 49.1 49.1v212.7c-.1 27.1-22.1 49-49.2 49zM49.1 93.8c-14 0-25.3 11.3-25.3 25.3v212.7c0 14 11.3 25.3 25.3 25.3h311.5c14 0 25.3-11.3 25.3-25.3V119.1c0-14-11.3-25.3-25.3-25.3H49.1z"></path><path class="lineal-fill" d="M49.2 81.7c-18.4 0-33.3 14.8-33.3 33.2 0 2.7.3 5.3.9 7.9C35.4 197.9 103.6 254 184.2 254h41.2c80.6 0 148.8-56.1 167.3-131.2 4.3-17.8-6.6-35.8-24.5-40.2-2.6-.6-5.2-.9-7.9-.9H49.2z"></path><path class="lineal-stroke" d="M225.4 265.9h-41.2c-41.5-.1-81.8-14.2-114.3-40C38 200.5 15.3 165.2 5.4 125.6-.5 101.4 14.3 77 38.6 71.1c3.5-.9 7.1-1.3 10.7-1.3h311.1c24.9 0 45.2 20.2 45.2 45.1 0 3.6-.4 7.2-1.3 10.7-9.9 39.6-32.6 74.8-64.5 100.2-32.6 25.9-72.9 40-114.4 40.1zM49.2 93.6c-6.6 0-12.9 3-16.9 8.2-4.1 5.1-5.5 11.8-3.9 18.2 17.6 71.8 81.9 122.3 155.8 122.2h41.2c73.9.1 138.3-50.4 155.8-122.2 1.6-6.3.1-13-3.9-18.1-4.1-5.2-10.3-8.3-16.9-8.2l-311.2-.1z"></path><path class="lineal-fill" d="M128.5 288.5h-13.8c-8.9 0-16.1-7.2-16.1-16.1v-48.3c0-8.9 7.2-16.1 16.1-16.1h13.8c8.9 0 16.1 7.2 16.1 16.1v48.3c0 8.9-7.2 16.1-16.1 16.1z"></path><path class="lineal-stroke" d="M128.5 300.4h-13.8c-15.5 0-28-12.5-28-28v-48.3c0-15.5 12.5-28 28-28h13.8c15.5 0 28 12.5 28 28v48.3c0 15.5-12.5 28-28 28zm-13.8-80.5c-2.3 0-4.2 1.9-4.2 4.2v48.3c0 2.3 1.9 4.2 4.2 4.2h13.8c2.3 0 4.2-1.9 4.2-4.2v-48.3c0-2.3-1.9-4.2-4.2-4.2h-13.8z"></path><path class="lineal-fill" d="M294.9 288.5h-13.8c-8.9 0-16.1-7.2-16.1-16.1v-48.3c0-8.9 7.2-16.1 16.1-16.1h13.8c8.9 0 16.1 7.2 16.1 16.1v48.3c0 8.9-7.2 16.1-16.1 16.1z"></path><path class="lineal-stroke" d="M294.9 300.4h-13.8c-15.5 0-28-12.5-28-28v-48.3c0-15.5 12.5-28 28-28h13.8c15.5 0 28 12.5 28 28v48.3c0 15.5-12.5 28-28 28zm-13.8-80.5c-2.3 0-4.2 1.9-4.2 4.2v48.3c0 2.3 1.9 4.2 4.2 4.2h13.8c2.3 0 4.2-1.9 4.2-4.2v-48.3c0-2.3-1.9-4.2-4.2-4.2h-13.8z"></path></svg>
<h4 class="card-title">Corporate Plan</h4>
<div class="prices !text-[#343f52]">
<div class="price price-show"><span class="price-currency">$</span><span class="price-value">49</span> <span class="price-duration">mo</span></div>
<div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">499</span> <span class="price-duration">yr</span></div>
</div>
<!--/.prices -->
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8 text-left">
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>20</strong> Projects </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>300K</strong> API Access </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>500MB</strong> Storage </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> Weekly <strong>Reports</strong></span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> 7/24 <strong>Support</strong></span></li>
</ul>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Choose Plan</a>
</div>
<!--/.card-body -->
</div>
<!--/.pricing -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.pricing-wrapper -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-2">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-2" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="flex flex-wrap mx-[-15px]"&#62;
&#60;div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center"&#62;
&#60;h2 class="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35]"&#62;Our Pricing&#60;/h2&#62;
&#60;h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-[5rem] xl:!mb-6 lg:!mb-6 md:!mb-6 lg:!px-10 xl:!px-10"&#62;We offer great prices, premium products and quality service for your business.&#60;/h3&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;div class="pricing-wrapper !relative"&#62;
&#60;div class="shape bg-dot primary rellax !w-[6rem] !h-[8rem] bg-[radial-gradient(#e31e24_2px,transparent_2.5px)] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: 2rem; right: -2.4rem;"&#62;&#60;/div&#62;
&#60;div class="shape !rounded-[50%] bg-line red rellax !w-[8rem] !h-[8rem] hidden xl:block lg:block absolute z-[1] opacity-50" data-rellax-speed="1" style="bottom: 0.5rem; left: -2.5rem;"&#62;&#60;/div&#62;
&#60;div class="flex flex-wrap items-center justify-center switcher"&#62;
&#60;p class="!mb-0 !pr-[.75rem]"&#62;Monthly&#60;/p&#62;
&#60;div class="pricing-switchers w-8 h-4 clear-both !text-center !relative bg-[rgba(30,34,40,0.07)] !box-content rounded-3xl border-[0.2rem] border-solid border-transparent"&#62;
&#60;div class="pricing-switcher pricing-switcher-active cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase !text-white"&#62;&#60;/div&#62;
&#60;div class="pricing-switcher cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase"&#62;&#60;/div&#62;
&#60;div class="h-4 w-4 block absolute z-[555] transition-[0.3s] duration-[ease-in-out] m-0 rounded-[100%] border-[none] left-0 top-0 !bg-[rgba(63,120,224)] opacity-100 switcher-button"&#62;&#60;/div&#62;
&#60;/div&#62;
&#60;p class="!mb-0 !pl-3 !relative"&#62;Yearly&#60;/p&#62;
&#60;/div&#62;
&#60;div class="flex flex-wrap mx-[-15px] !mt-3 xl:!mt-5 lg:!mt-5 md:!mt-5"&#62;
&#60;div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"&#62;
&#60;div class="pricing card !text-center"&#62;
&#60;div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]"&#62;
&#60;img src="../../assets/img/icons/lineal/shopping-basket.svg" class="svg-inject icon-svg !text-[#e31e24] !mb-3 !w-[2.6rem] !h-[2.6rem] m-[0_auto]" alt="image"&#62;
&#60;h4 class="card-title"&#62;Basic Plan&#60;/h4&#62;
&#60;div class="prices !text-[#343f52]"&#62;
&#60;div class="price price-show"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;9&#60;/span&#62; &#60;span class="price-duration"&#62;mo&#60;/span&#62;&#60;/div&#62;
&#60;div class="price price-hide price-hidden"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;99&#60;/span&#62; &#60;span class="price-duration"&#62;yr&#60;/span&#62;&#60;/div&#62;
&#60;/div&#62;
&#60;!--/.prices --&#62;
&#60;ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8 text-left"&#62;
&#60;li class="relative !pl-6"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;1&#60;/strong&#62; Project &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;100K&#60;/strong&#62; API Access &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;100MB&#60;/strong&#62; Storage &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; Weekly &#60;strong&#62;Reports&#60;/strong&#62; &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; 7/24 &#60;strong&#62;Support&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;/ul&#62;
&#60;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"&#62;Choose Plan&#60;/a&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.pricing --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full popular !mt-[30px]"&#62;
&#60;div class="pricing card !text-center"&#62;
&#60;div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]"&#62;
&#60;img src="../../assets/img/icons/lineal/home.svg" class="svg-inject icon-svg !text-[#e31e24] !mb-3 !w-[2.6rem] !h-[2.6rem] m-[0_auto]" alt="image"&#62;
&#60;h4 class="card-title"&#62;Premium Plan&#60;/h4&#62;
&#60;div class="prices !text-[#343f52]"&#62;
&#60;div class="price price-show"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;19&#60;/span&#62; &#60;span class="price-duration"&#62;mo&#60;/span&#62;&#60;/div&#62;
&#60;div class="price price-hide price-hidden"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;199&#60;/span&#62; &#60;span class="price-duration"&#62;yr&#60;/span&#62;&#60;/div&#62;
&#60;/div&#62;
&#60;!--/.prices --&#62;
&#60;ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8 text-left"&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;5&#60;/strong&#62; Projects &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;100K&#60;/strong&#62; API Access &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;200MB&#60;/strong&#62; Storage &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; Weekly &#60;strong&#62;Reports&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; 7/24 &#60;strong&#62;Support&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;/ul&#62;
&#60;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"&#62;Choose Plan&#60;/a&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.pricing --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="md:w-6/12 lg:w-4/12 xl:w-4/12 md:!ml-[25%] w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-0 lg:!ml-0 !mt-[30px]"&#62;
&#60;div class="pricing card !text-center"&#62;
&#60;div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]"&#62;
&#60;img src="../../assets/img/icons/lineal/briefcase-2.svg" class="svg-inject icon-svg !text-[#e31e24] !mb-3 !w-[2.6rem] !h-[2.6rem] m-[0_auto]" alt="image"&#62;
&#60;h4 class="card-title"&#62;Corporate Plan&#60;/h4&#62;
&#60;div class="prices !text-[#343f52]"&#62;
&#60;div class="price price-show"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;49&#60;/span&#62; &#60;span class="price-duration"&#62;mo&#60;/span&#62;&#60;/div&#62;
&#60;div class="price price-hide price-hidden"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;499&#60;/span&#62; &#60;span class="price-duration"&#62;yr&#60;/span&#62;&#60;/div&#62;
&#60;/div&#62;
&#60;!--/.prices --&#62;
&#60;ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8 text-left"&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;20&#60;/strong&#62; Projects &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;300K&#60;/strong&#62; API Access &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;500MB&#60;/strong&#62; Storage &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; Weekly &#60;strong&#62;Reports&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; 7/24 &#60;strong&#62;Support&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;/ul&#62;
&#60;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"&#62;Choose Plan&#60;/a&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.pricing --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;/div&#62;
&#60;!--/.pricing-wrapper --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-3" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<h2 class="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-7 !text-center">Our Pricing</h2>
<div class="pricing-wrapper">
<div class="flex flex-wrap items-center justify-center switcher">
<p class="!mb-0 !pr-[.75rem]">Monthly</p>
<div class="pricing-switchers w-8 h-4 clear-both !text-center !relative bg-[rgba(30,34,40,0.07)] !box-content rounded-3xl border-[0.2rem] border-solid border-transparent">
<div class="pricing-switcher pricing-switcher-active cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase !text-white"></div>
<div class="pricing-switcher cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase"></div>
<div class="h-4 w-4 block absolute z-[555] transition-[0.3s] duration-[ease-in-out] m-0 rounded-[100%] border-[none] left-0 top-0 !bg-[rgba(63,120,224)] opacity-100 switcher-button"></div>
</div>
<p class="!mb-0 !pl-3 !relative">Yearly <span class="!text-[#e2626b]">(Save 30%)</span></p>
</div>
<div class="flex flex-wrap mx-0 !mt-2">
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !mt-[30px]">
<div class="pricing card !shadow-none !border-0">
<div class="card-body flex-[1_1_auto] py-[60px] px-[40px] !border-0 border-[#fff]">
<div class="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none !p-0 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !rounded-[100%]"> <i class="uil uil-shopping-bag before:content-['\ecba']"></i> </div>
<h4 class="card-title">Basic Plan</h4>
<div class="prices !text-[#343f52]">
<div class="price price-show !justify-start"><span class="price-currency">$</span><span class="price-value">9</span> <span class="price-duration">mo</span></div>
<div class="price price-hide price-hidden !justify-start"><span class="price-currency">$</span><span class="price-value">99</span> <span class="price-duration">yr</span></div>
</div>
<!--/.prices -->
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
<li class="relative !pl-6"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>1</strong> Project </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>100K</strong> API Access </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>100MB</strong> Storage </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"></i><span> Weekly <strong>Reports</strong> </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"></i><span> 7/24 <strong>Support</strong></span></li>
</ul>
<a href="#" class="btn btn-soft-primary !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.05)]">Choose Plan</a>
</div>
<!--/.card-body -->
</div>
<!--/.pricing -->
</div>
<!--/column -->
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !mt-[30px]">
<div class="pricing card !shadow-none !border-0">
<div class="card-body flex-[1_1_auto] py-[60px] px-[40px] !border-0 border-[#fff]">
<div class="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none !p-0 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !rounded-[100%]"> <i class="uil uil-shopping-cart-alt before:content-['\ecbc']"></i> </div>
<h4 class="card-title">Premium Plan</h4>
<div class="prices !text-[#343f52]">
<div class="price price-show !justify-start"><span class="price-currency">$</span><span class="price-value">19</span> <span class="price-duration">mo</span></div>
<div class="price price-hide price-hidden !justify-start"><span class="price-currency">$</span><span class="price-value">199</span> <span class="price-duration">yr</span></div>
</div>
<!--/.prices -->
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>5</strong> Projects </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>100K</strong> API Access </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>200MB</strong> Storage </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> Weekly <strong>Reports</strong></span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"></i><span> 7/24 <strong>Support</strong></span></li>
</ul>
<a href="#" class="btn btn-soft-primary !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.05)]">Choose Plan</a>
</div>
<!--/.card-body -->
</div>
<!--/.pricing -->
</div>
<!--/column -->
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !mt-[30px]">
<div class="pricing card !bg-[#edf2fc]">
<div class="card-body flex-[1_1_auto] py-[60px] px-[40px] !border-0 border-[#fff]">
<div class="icon btn btn-circle btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] pointer-events-none !p-0 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !rounded-[100%]"> <i class="uil uil-store before:content-['\ed04']"></i> </div>
<h4 class="card-title">Corporate Plan</h4>
<div class="prices !text-[#343f52]">
<div class="price price-show !justify-start"><span class="price-currency">$</span><span class="price-value">29</span> <span class="price-duration">mo</span></div>
<div class="price price-hide price-hidden !justify-start"><span class="price-currency">$</span><span class="price-value">299</span> <span class="price-duration">yr</span></div>
</div>
<!--/.prices -->
<ul class="pl-0 list-none bullet-bg bullet-primary !mt-7 !mb-8">
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>20</strong> Projects </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>300K</strong> API Access </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>500MB</strong> Storage </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> Weekly <strong>Reports</strong></span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> 7/24 <strong>Support</strong></span></li>
</ul>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Choose Plan</a>
</div>
<!--/.card-body -->
</div>
<!--/.pricing -->
</div>
<!--/column -->
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !mt-[30px]">
<div class="pricing card !shadow-none !border-0">
<div class="card-body flex-[1_1_auto] py-[60px] px-[40px] !border-0 border-[#fff]">
<div class="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none !p-0 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !rounded-[100%]"> <i class="uil uil-store-alt before:content-['\ecf9']"></i> </div>
<h4 class="card-title">Community Plan</h4>
<div class="prices !text-[#343f52]">
<div class="price price-show !justify-start"><span class="price-currency">$</span><span class="price-value">49</span> <span class="price-duration">mo</span></div>
<div class="price price-hide price-hidden !justify-start"><span class="price-currency">$</span><span class="price-value">499</span> <span class="price-duration">yr</span></div>
</div>
<!--/.prices -->
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>90</strong> Projects </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>900K</strong> API Access </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>900MB</strong> Storage </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> Weekly <strong>Reports</strong> </span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> 7/24 <strong>Support</strong></span></li>
</ul>
<a href="#" class="btn btn-soft-primary !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.05)]">Choose Plan</a>
</div>
<!--/.card-body -->
</div>
<!--/.pricing -->
</div>
</div>
<!--/.row -->
</div>
<!--/.pricing-wrapper -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-3">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-3" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;h2 class="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-7 !text-center"&#62;Our Pricing&#60;/h2&#62;
&#60;div class="pricing-wrapper"&#62;
&#60;div class="flex flex-wrap items-center justify-center switcher"&#62;
&#60;p class="!mb-0 !pr-[.75rem]"&#62;Monthly&#60;/p&#62;
&#60;div class="pricing-switchers w-8 h-4 clear-both !text-center !relative bg-[rgba(30,34,40,0.07)] !box-content rounded-3xl border-[0.2rem] border-solid border-transparent"&#62;
&#60;div class="pricing-switcher pricing-switcher-active cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase !text-white"&#62;&#60;/div&#62;
&#60;div class="pricing-switcher cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase"&#62;&#60;/div&#62;
&#60;div class="h-4 w-4 block absolute z-[555] transition-[0.3s] duration-[ease-in-out] m-0 rounded-[100%] border-[none] left-0 top-0 !bg-[rgba(63,120,224)] opacity-100 switcher-button"&#62;&#60;/div&#62;
&#60;/div&#62;
&#60;p class="!mb-0 !pl-3 !relative"&#62;Yearly &#60;span class="!text-[#e2626b]"&#62;(Save 30%)&#60;/span&#62;&#60;/p&#62;
&#60;/div&#62;
&#60;div class="flex flex-wrap mx-0 !mt-2"&#62;
&#60;div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !mt-[30px]"&#62;
&#60;div class="pricing card !shadow-none !border-0"&#62;
&#60;div class="card-body flex-[1_1_auto] py-[60px] px-[40px] !border-0 border-[#fff]"&#62;
&#60;div class="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none !p-0 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !rounded-[100%]"&#62; &#60;i class="uil uil-shopping-bag before:content-['\ecba']"&#62;&#60;/i&#62; &#60;/div&#62;
&#60;h4 class="card-title"&#62;Basic Plan&#60;/h4&#62;
&#60;div class="prices !text-[#343f52]"&#62;
&#60;div class="price price-show !justify-start"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;9&#60;/span&#62; &#60;span class="price-duration"&#62;mo&#60;/span&#62;&#60;/div&#62;
&#60;div class="price price-hide price-hidden !justify-start"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;99&#60;/span&#62; &#60;span class="price-duration"&#62;yr&#60;/span&#62;&#60;/div&#62;
&#60;/div&#62;
&#60;!--/.prices --&#62;
&#60;ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8"&#62;
&#60;li class="relative !pl-6"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;1&#60;/strong&#62; Project &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;100K&#60;/strong&#62; API Access &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;100MB&#60;/strong&#62; Storage &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; Weekly &#60;strong&#62;Reports&#60;/strong&#62; &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; 7/24 &#60;strong&#62;Support&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;/ul&#62;
&#60;a href="#" class="btn btn-soft-primary !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.05)]"&#62;Choose Plan&#60;/a&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.pricing --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !mt-[30px]"&#62;
&#60;div class="pricing card !shadow-none !border-0"&#62;
&#60;div class="card-body flex-[1_1_auto] py-[60px] px-[40px] !border-0 border-[#fff]"&#62;
&#60;div class="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none !p-0 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !rounded-[100%]"&#62; &#60;i class="uil uil-shopping-cart-alt before:content-['\ecbc']"&#62;&#60;/i&#62; &#60;/div&#62;
&#60;h4 class="card-title"&#62;Premium Plan&#60;/h4&#62;
&#60;div class="prices !text-[#343f52]"&#62;
&#60;div class="price price-show !justify-start"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;19&#60;/span&#62; &#60;span class="price-duration"&#62;mo&#60;/span&#62;&#60;/div&#62;
&#60;div class="price price-hide price-hidden !justify-start"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;199&#60;/span&#62; &#60;span class="price-duration"&#62;yr&#60;/span&#62;&#60;/div&#62;
&#60;/div&#62;
&#60;!--/.prices --&#62;
&#60;ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8"&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;5&#60;/strong&#62; Projects &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;100K&#60;/strong&#62; API Access &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;200MB&#60;/strong&#62; Storage &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; Weekly &#60;strong&#62;Reports&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; 7/24 &#60;strong&#62;Support&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;/ul&#62;
&#60;a href="#" class="btn btn-soft-primary !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.05)]"&#62;Choose Plan&#60;/a&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.pricing --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !mt-[30px]"&#62;
&#60;div class="pricing card !bg-[#edf2fc]"&#62;
&#60;div class="card-body flex-[1_1_auto] py-[60px] px-[40px] !border-0 border-[#fff]"&#62;
&#60;div class="icon btn btn-circle btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] pointer-events-none !p-0 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !rounded-[100%]"&#62; &#60;i class="uil uil-store before:content-['\ed04']"&#62;&#60;/i&#62; &#60;/div&#62;
&#60;h4 class="card-title"&#62;Corporate Plan&#60;/h4&#62;
&#60;div class="prices !text-[#343f52]"&#62;
&#60;div class="price price-show !justify-start"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;29&#60;/span&#62; &#60;span class="price-duration"&#62;mo&#60;/span&#62;&#60;/div&#62;
&#60;div class="price price-hide price-hidden !justify-start"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;299&#60;/span&#62; &#60;span class="price-duration"&#62;yr&#60;/span&#62;&#60;/div&#62;
&#60;/div&#62;
&#60;!--/.prices --&#62;
&#60;ul class="pl-0 list-none bullet-bg bullet-primary !mt-7 !mb-8"&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;20&#60;/strong&#62; Projects &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;300K&#60;/strong&#62; API Access &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;500MB&#60;/strong&#62; Storage &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; Weekly &#60;strong&#62;Reports&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; 7/24 &#60;strong&#62;Support&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;/ul&#62;
&#60;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"&#62;Choose Plan&#60;/a&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.pricing --&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !mt-[30px]"&#62;
&#60;div class="pricing card !shadow-none !border-0"&#62;
&#60;div class="card-body flex-[1_1_auto] py-[60px] px-[40px] !border-0 border-[#fff]"&#62;
&#60;div class="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none !p-0 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !rounded-[100%]"&#62; &#60;i class="uil uil-store-alt before:content-['\ecf9']"&#62;&#60;/i&#62; &#60;/div&#62;
&#60;h4 class="card-title"&#62;Community Plan&#60;/h4&#62;
&#60;div class="prices !text-[#343f52]"&#62;
&#60;div class="price price-show !justify-start"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;49&#60;/span&#62; &#60;span class="price-duration"&#62;mo&#60;/span&#62;&#60;/div&#62;
&#60;div class="price price-hide price-hidden !justify-start"&#62;&#60;span class="price-currency"&#62;$&#60;/span&#62;&#60;span class="price-value"&#62;499&#60;/span&#62; &#60;span class="price-duration"&#62;yr&#60;/span&#62;&#60;/div&#62;
&#60;/div&#62;
&#60;!--/.prices --&#62;
&#60;ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8"&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;90&#60;/strong&#62; Projects &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;900K&#60;/strong&#62; API Access &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62;&#60;strong&#62;900MB&#60;/strong&#62; Storage &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; Weekly &#60;strong&#62;Reports&#60;/strong&#62; &#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-6 !mt-[0.35rem]"&#62;&#60;i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"&#62;&#60;/i&#62;&#60;span&#62; 7/24 &#60;strong&#62;Support&#60;/strong&#62;&#60;/span&#62;&#60;/li&#62;
&#60;/ul&#62;
&#60;a href="#" class="btn btn-soft-primary !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.05)]"&#62;Choose Plan&#60;/a&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.pricing --&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;/div&#62;
&#60;!--/.pricing-wrapper --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-4" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-12 xl:pb-14 lg:pb-14 md:pb-14">
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">Our Pricing</h2>
<p class="lead !text-[1.05rem] !leading-[1.6] font-medium">We offer <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[30%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[9%] motion-reduce:after:transition-none after:bg-[rgba(63,120,224,.12)]">great prices</span>, premium and quality products for your business.</p>
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
<p>Enjoy a <a href="#" class="hover">free 30-day trial</a> and experience the full service. No credit card required!</p>
</div>
<!--/column -->
</div>
<!--/.row -->
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mt-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">See All Prices</a>
<div class="table-responsive !mt-10 xl:!mt-0 lg:!mt-0">
<table class="table table-borderless table-striped !text-center">
<thead>
<tr>
<th class="!w-[22.5rem]"></th>
<th>
<div class="h4 !mb-1">Basic Plan</div>
<div class="!text-[.75rem] font-medium !text-[#aab0bc]">$9 / Monthly</div>
</th>
<th>
<div class="h4 !mb-1">Premium Plan</div>
<div class="!text-[.75rem] font-medium !text-[#aab0bc]">$19 / Monthly</div>
</th>
<th>
<div class="h4 !mb-1">Corporate Plan</div>
<div class="!text-[.75rem] font-medium !text-[#aab0bc]">$29 / Monthly</div>
</th>
<th>
<div class="h4 !mb-1">Business Plan</div>
<div class="!text-[.75rem] font-medium !text-[#aab0bc]">$49 / Monthly</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="option text-left">Project</td>
<td>1</td>
<td>5</td>
<td>20</td>
<td>90</td>
</tr>
<tr>
<td class="option text-left">API Access</td>
<td>100K</td>
<td>200K</td>
<td>300K</td>
<td>900K</td>
</tr>
<tr>
<td class="option text-left">Storage</td>
<td>100MB</td>
<td>200MB</td>
<td>500MB</td>
<td>900MB</td>
</tr>
<tr>
<td class="option text-left">Weekly Reports</td>
<td>-</td>
<td><i class="uil uil-check !bg-[#e0e9fa] !text-[#e31e24] !rounded-[50%] p-1 before:content-['\e9dd']"></i></td>
<td><i class="uil uil-check !bg-[#e0e9fa] !text-[#e31e24] !rounded-[50%] p-1 before:content-['\e9dd']"></i></td>
<td><i class="uil uil-check !bg-[#e0e9fa] !text-[#e31e24] !rounded-[50%] p-1 before:content-['\e9dd']"></i></td>
</tr>
<tr>
<td class="option text-left">24/7 Support</td>
<td>-</td>
<td>-</td>
<td><i class="uil uil-check !bg-[#e0e9fa] !text-[#e31e24] !rounded-[50%] p-1 before:content-['\e9dd']"></i></td>
<td><i class="uil uil-check !bg-[#e0e9fa] !text-[#e31e24] !rounded-[50%] p-1 before:content-['\e9dd']"></i></td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="!w-[22.5rem]"></th>
<th><a href="#" class="btn btn-soft-primary !rounded-[50rem] !mt-1">Choose Plan</a></th>
<th><a href="#" class="btn btn-soft-primary !rounded-[50rem] !mt-1">Choose Plan</a></th>
<th><a href="#" class="btn btn-soft-primary !rounded-[50rem] !mt-1">Choose Plan</a></th>
<th><a href="#" class="btn btn-soft-primary !rounded-[50rem] !mt-1">Choose Plan</a></th>
</tr>
</tfoot>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="card">
<div class="card-footer border-0 !relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-4">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-4" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-12 xl:pb-14 lg:pb-14 md:pb-14"&#62;
&#60;h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3"&#62;Our Pricing&#60;/h2&#62;
&#60;p class="lead !text-[1.05rem] !leading-[1.6] font-medium"&#62;We offer &#60;span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[30%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[9%] motion-reduce:after:transition-none after:bg-[rgba(63,120,224,.12)]"&#62;great prices&#60;/span&#62;, premium and quality products for your business.&#60;/p&#62;
&#60;div class="flex flex-wrap mx-[-15px]"&#62;
&#60;div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full"&#62;
&#60;p&#62;Enjoy a &#60;a href="#" class="hover"&#62;free 30-day trial&#60;/a&#62; and experience the full service. No credit card required!&#60;/p&#62;
&#60;/div&#62;
&#60;!--/column --&#62;
&#60;/div&#62;
&#60;!--/.row --&#62;
&#60;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mt-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"&#62;See All Prices&#60;/a&#62;
&#60;div class="table-responsive !mt-10 xl:!mt-0 lg:!mt-0"&#62;
&#60;table class="table table-borderless table-striped !text-center"&#62;
&#60;thead&#62;
&#60;tr&#62;
&#60;th class="!w-[22.5rem]"&#62;&#60;/th&#62;
&#60;th&#62;
&#60;div class="h4 !mb-1"&#62;Basic Plan&#60;/div&#62;
&#60;div class="!text-[.75rem] font-medium !text-[#aab0bc]"&#62;$9 / Monthly&#60;/div&#62;
&#60;/th&#62;
&#60;th&#62;
&#60;div class="h4 !mb-1"&#62;Premium Plan&#60;/div&#62;
&#60;div class="!text-[.75rem] font-medium !text-[#aab0bc]"&#62;$19 / Monthly&#60;/div&#62;
&#60;/th&#62;
&#60;th&#62;
&#60;div class="h4 !mb-1"&#62;Corporate Plan&#60;/div&#62;
&#60;div class="!text-[.75rem] font-medium !text-[#aab0bc]"&#62;$29 / Monthly&#60;/div&#62;
&#60;/th&#62;
&#60;th&#62;
&#60;div class="h4 !mb-1"&#62;Business Plan&#60;/div&#62;
&#60;div class="!text-[.75rem] font-medium !text-[#aab0bc]"&#62;$49 / Monthly&#60;/div&#62;
&#60;/th&#62;
&#60;/tr&#62;
&#60;/thead&#62;
&#60;tbody&#62;
&#60;tr&#62;
&#60;td class="option text-left"&#62;Project&#60;/td&#62;
&#60;td&#62;1&#60;/td&#62;
&#60;td&#62;5&#60;/td&#62;
&#60;td&#62;20&#60;/td&#62;
&#60;td&#62;90&#60;/td&#62;
&#60;/tr&#62;
&#60;tr&#62;
&#60;td class="option text-left"&#62;API Access&#60;/td&#62;
&#60;td&#62;100K&#60;/td&#62;
&#60;td&#62;200K&#60;/td&#62;
&#60;td&#62;300K&#60;/td&#62;
&#60;td&#62;900K&#60;/td&#62;
&#60;/tr&#62;
&#60;tr&#62;
&#60;td class="option text-left"&#62;Storage&#60;/td&#62;
&#60;td&#62;100MB&#60;/td&#62;
&#60;td&#62;200MB&#60;/td&#62;
&#60;td&#62;500MB&#60;/td&#62;
&#60;td&#62;900MB&#60;/td&#62;
&#60;/tr&#62;
&#60;tr&#62;
&#60;td class="option text-left"&#62;Weekly Reports&#60;/td&#62;
&#60;td&#62;-&#60;/td&#62;
&#60;td&#62;&#60;i class="uil uil-check !bg-[#e0e9fa] !text-[#e31e24] !rounded-[50%] p-1 before:content-['\e9dd']"&#62;&#60;/i&#62;&#60;/td&#62;
&#60;td&#62;&#60;i class="uil uil-check !bg-[#e0e9fa] !text-[#e31e24] !rounded-[50%] p-1 before:content-['\e9dd']"&#62;&#60;/i&#62;&#60;/td&#62;
&#60;td&#62;&#60;i class="uil uil-check !bg-[#e0e9fa] !text-[#e31e24] !rounded-[50%] p-1 before:content-['\e9dd']"&#62;&#60;/i&#62;&#60;/td&#62;
&#60;/tr&#62;
&#60;tr&#62;
&#60;td class="option text-left"&#62;24/7 Support&#60;/td&#62;
&#60;td&#62;-&#60;/td&#62;
&#60;td&#62;-&#60;/td&#62;
&#60;td&#62;&#60;i class="uil uil-check !bg-[#e0e9fa] !text-[#e31e24] !rounded-[50%] p-1 before:content-['\e9dd']"&#62;&#60;/i&#62;&#60;/td&#62;
&#60;td&#62;&#60;i class="uil uil-check !bg-[#e0e9fa] !text-[#e31e24] !rounded-[50%] p-1 before:content-['\e9dd']"&#62;&#60;/i&#62;&#60;/td&#62;
&#60;/tr&#62;
&#60;/tbody&#62;
&#60;tfoot&#62;
&#60;tr&#62;
&#60;th class="!w-[22.5rem]"&#62;&#60;/th&#62;
&#60;th&#62;&#60;a href="#" class="btn btn-soft-primary !rounded-[50rem] !mt-1"&#62;Choose Plan&#60;/a&#62;&#60;/th&#62;
&#60;th&#62;&#60;a href="#" class="btn btn-soft-primary !rounded-[50rem] !mt-1"&#62;Choose Plan&#60;/a&#62;&#60;/th&#62;
&#60;th&#62;&#60;a href="#" class="btn btn-soft-primary !rounded-[50rem] !mt-1"&#62;Choose Plan&#60;/a&#62;&#60;/th&#62;
&#60;th&#62;&#60;a href="#" class="btn btn-soft-primary !rounded-[50rem] !mt-1"&#62;Choose Plan&#60;/a&#62;&#60;/th&#62;
&#60;/tr&#62;
&#60;/tfoot&#62;
&#60;/table&#62;
&#60;/div&#62;
&#60;!-- /.table-responsive --&#62;
&#60;/div&#62;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!--/.container -->
</section>
<!-- /section -->
</div>
<!-- /.content-wrapper -->
<section class="wrapper bg-[#21262c] opacity-100 !text-white">
<div class="container pt-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24 !text-center">
<div class="flex flex-wrap mx-[-15px]">
<div class="md:w-10/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<h2 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !text-white !mt-3 !mb-3 xl:!px-8 lg:!px-8">Think unique and be creative. Make a difference with Trunçgil.</h2>
<p class="lead text-[1.05rem] !leading-[1.6] !mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
<a href="https://truncgil.com.tr" target="_blank" class="btn btn-lg btn-white !rounded-[50rem] !mb-10 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Buy Trunçgil</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<img class="max-w-full h-auto m-[0_auto]" src="../../assets/img/demos/f1.png" alt="image">
</div>
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
<script src="../../assets/js/theme.js"></script>
</body>
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/docs/blocks/pricing by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:39 GMT -->
</html>
Reference in New Issue View Git Blame Copy Permalink