TailwindCSS Templates
Below you will find TailwindCSS templates for your copy and paste needs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landmark</title>
<!--
For more customization options, we would advise
you to build your TailwindCSS from the source.
https://tailwindcss.com/docs/installation
-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.2/tailwind.min.css">
<!-- Small CSS to Hide elements at 1520px size -->
<style>
@media(max-width:1520px) {
.left-svg {
display: none;
}
}
/* small css for the mobile nav close */
#nav-mobile-btn.close span:first-child {
transform: rotate(45deg);
top: 4px;
position: relative;
background: #a0aec0;
}
#nav-mobile-btn.close span:nth-child(2) {
transform: rotate(-45deg);
margin-top: 0px;
background: #a0aec0;
}
</style>
</head>
<body class="overflow-x-hidden antialiased">
<!-- Header Section -->
<header class="relative z-50 w-full h-24">
<div
class="container flex items-center justify-center h-full max-w-6xl px-8 mx-auto sm:justify-between xl:px-0">
<a href="/" class="relative flex items-center inline-block h-5 h-full font-black leading-none">
<svg class="w-auto h-6 text-indigo-600 fill-current" viewBox="0 0 194 116"
xmlns="http://www.w3.org/2000/svg">
<g fill-rule="evenodd">
<path
d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z" />
<path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z" />
</g>
</svg>
<span class="ml-3 text-xl text-gray-800">Landmark<span class="text-pink-500">.</span></span>
</a>
<nav id="nav"
class="absolute top-0 left-0 z-50 flex flex-col items-center justify-between hidden w-full h-64 pt-5 mt-24 text-sm text-gray-800 bg-white border-t border-gray-200 md:w-auto md:flex-row md:h-24 lg:text-base md:bg-transparent md:mt-0 md:border-none md:py-0 md:flex md:relative">
<a href="#"
class="ml-0 mr-0 font-bold duration-100 md:ml-12 md:mr-3 lg:mr-8 transition-color hover:text-indigo-600">Home</a>
<a href="#features"
class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color hover:text-indigo-600">Features</a>
<a href="#pricing"
class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color hover:text-indigo-600">Pricing</a>
<a href="#testimonials"
class="font-bold duration-100 transition-color hover:text-indigo-600">Testimonials</a>
<div class="flex flex-col block w-full font-medium border-t border-gray-200 md:hidden">
<a href="#_" class="w-full py-2 font-bold text-center text-pink-500">Login</a>
<a href="#_"
class="relative inline-block w-full px-5 py-3 text-sm leading-none text-center text-white bg-indigo-700 fold-bold">Get
Started</a>
</div>
</nav>
<div
class="absolute left-0 flex-col items-center justify-center hidden w-full pb-8 mt-48 border-b border-gray-200 md:relative md:w-auto md:bg-transparent md:border-none md:mt-0 md:flex-row md:p-0 md:items-end md:flex md:justify-between">
<a href="#_"
class="relative z-40 px-3 py-2 mr-0 text-sm font-bold text-pink-500 md:px-5 lg:text-white sm:mr-3 md:mt-0">Login</a>
<a href="#_"
class="relative z-40 inline-block w-auto h-full px-5 py-3 text-sm font-bold leading-none text-white transition-all transition duration-100 duration-300 bg-indigo-700 rounded shadow-md fold-bold lg:bg-white lg:text-indigo-700 sm:w-full lg:shadow-none hover:shadow-xl">Get
Started</a>
<svg class="absolute top-0 left-0 hidden w-screen max-w-3xl -mt-64 -ml-12 lg:block"
viewBox="0 0 818 815" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="c">
<stop stop-color="#E614F2" offset="0%" />
<stop stop-color="#FC3832" offset="100%" />
</linearGradient>
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="f">
<stop stop-color="#657DE9" offset="0%" />
<stop stop-color="#1C0FD7" offset="100%" />
</linearGradient>
<filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
id="a">
<feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" in="shadowBlurOuter1" />
</filter>
<filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
id="d">
<feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter1" />
</filter>
<path
d="M160.52 108.243h497.445c17.83 0 24.296 1.856 30.814 5.342 6.519 3.486 11.635 8.602 15.12 15.12 3.487 6.52 5.344 12.985 5.344 30.815v497.445c0 17.83-1.857 24.296-5.343 30.814-3.486 6.519-8.602 11.635-15.12 15.12-6.52 3.487-12.985 5.344-30.815 5.344H160.52c-17.83 0-24.296-1.857-30.814-5.343-6.519-3.486-11.635-8.602-15.12-15.12-3.487-6.52-5.343-12.985-5.343-30.815V159.52c0-17.83 1.856-24.296 5.342-30.814 3.486-6.519 8.602-11.635 15.12-15.12 6.52-3.487 12.985-5.343 30.815-5.343z"
id="b" />
<path
d="M159.107 107.829H656.55c17.83 0 24.296 1.856 30.815 5.342 6.518 3.487 11.634 8.602 15.12 15.12 3.486 6.52 5.343 12.985 5.343 30.816V656.55c0 17.83-1.857 24.296-5.343 30.815-3.486 6.518-8.602 11.634-15.12 15.12-6.519 3.486-12.985 5.343-30.815 5.343H159.107c-17.83 0-24.297-1.857-30.815-5.343-6.519-3.486-11.634-8.602-15.12-15.12-3.487-6.519-5.343-12.985-5.343-30.815V159.107c0-17.83 1.856-24.297 5.342-30.815 3.487-6.519 8.602-11.634 15.12-15.12 6.52-3.487 12.985-5.343 30.816-5.343z"
id="e" />
</defs>
<g fill="none" fill-rule="evenodd" opacity=".9">
<g transform="rotate(65 416.452 409.167)">
<use fill="#000" filter="url(#a)" xlink:href="#b" />
<use fill="url(#c)" xlink:href="#b" />
</g>
<g transform="rotate(29 421.929 414.496)">
<use fill="#000" filter="url(#d)" xlink:href="#e" />
<use fill="url(#f)" xlink:href="#e" />
</g>
</g>
</svg>
</div>
<div id="nav-mobile-btn"
class="absolute top-0 right-0 z-50 block w-6 mt-8 mr-10 cursor-pointer select-none md:hidden sm:mt-10">
<span class="block w-full h-1 mt-2 duration-200 transform bg-gray-800 rounded-full sm:mt-1"></span>
<span class="block w-full h-1 mt-1 duration-200 transform bg-gray-800 rounded-full"></span>
</div>
</div>
</header>
<!-- End Header Section-->
<!-- BEGIN HERO SECTION -->
<div class="relative items-center justify-center w-full overflow-x-hidden lg:pt-40 lg:pb-40 xl:pt-40 xl:pb-64">
<div
class="container flex flex-col items-center justify-between h-full max-w-6xl px-8 mx-auto -mt-32 lg:flex-row xl:px-0">
<div
class="z-30 flex flex-col items-center w-full max-w-xl pt-48 text-center lg:items-start lg:w-1/2 lg:pt-20 xl:pt-40 lg:text-left">
<h1 class="relative mb-4 text-3xl font-black leading-tight text-gray-900 sm:text-6xl xl:mb-8">Build the
Next
Great Thing</h1>
<p class="pr-0 mb-8 text-base text-gray-600 sm:text-lg xl:text-xl lg:pr-20">Are you ready to start your
adventure and start building the next greatest SAAS app on the market?</p>
<a href="#_"
class="relative self-start inline-block w-auto px-8 py-4 mx-auto mt-0 text-base font-bold text-white bg-indigo-600 border-t border-gray-200 rounded-md shadow-xl sm:mt-1 fold-bold lg:mx-0">Signup
Today!</a>
<!-- Integrates with section -->
<div class="flex-col hidden mt-12 sm:flex lg:mt-24">
<p class="mb-4 text-sm font-medium tracking-widest text-gray-500 uppercase">Integrates With</p>
<div class="flex">
<svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
viewBox="0 0 2499 1037" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" stroke-width="1">
<g>
<path
d="M261.062 466.768c-53.833-19.912-83.335-35.399-83.335-59.735 0-20.652 16.963-32.45 47.201-32.45 55.31 0 112.09 21.388 151.178 40.559l22.124-136.427c-30.973-14.752-94.397-39.088-182.151-39.088-61.947 0-113.573 16.223-150.443 46.46-38.352 31.71-58.263 77.434-58.263 132.744 0 100.293 61.211 143.07 160.769 179.203 64.159 22.86 85.547 39.088 85.547 64.16 0 24.336-20.652 38.346-58.263 38.346-46.46 0-123.153-22.86-173.302-52.356L0 786.087c42.771 24.337 122.417 49.409 205.017 49.409 65.63 0 120.204-15.487 157.08-44.984 41.293-32.45 62.682-80.381 62.682-142.328 0-102.511-62.683-145.282-163.717-181.416zm523.877-80.387l22.124-135.692H690.265V85.966l-157.035 25.84-22.677 138.883-55.232 8.96-20.675 126.732h75.68v266.227c0 69.32 17.7 117.257 53.833 146.754 30.238 24.336 73.745 36.134 134.956 36.134 47.196 0 75.957-8.109 95.868-13.275V678.416c-11.062 2.953-36.133 8.114-53.097 8.114-36.134 0-51.62-18.435-51.62-60.47V386.38h94.673zm350.752-143.618c-51.62 0-92.92 27.102-109.142 75.775l-11.062-67.849H855.459v573.745h182.887V452.017c22.865-28.026 55.31-38.159 99.558-38.159 9.59 0 19.911 0 32.45 2.213V247.188c-12.539-2.948-23.6-4.425-34.663-4.425zm171.095-48.86c53.098 0 95.869-43.507 95.869-96.604 0-53.839-42.771-96.61-95.869-96.61-53.838 0-96.609 42.771-96.609 96.61 0 53.097 42.771 96.604 96.61 96.604zm-92.184 56.786h183.628v573.745h-183.628V250.689zm703.999 51.62c-32.45-42.035-77.434-62.682-134.956-62.682-53.097 0-99.558 22.124-143.07 68.584l-9.585-57.522h-160.769v786.134l182.893-30.232V822.22c28.02 8.85 56.78 13.275 82.594 13.275 45.725 0 112.096-11.798 163.717-67.843 49.408-53.839 74.485-137.168 74.485-247.052 0-97.345-18.44-171.09-55.31-218.291zm-151.92 353.983c-14.75 28.025-37.61 42.777-64.159 42.777-18.435 0-34.662-3.69-49.408-11.062V415.142c30.973-32.445 58.993-36.134 69.32-36.134 46.46 0 69.32 50.15 69.32 148.23 0 56.045-8.11 99.557-25.073 129.054zm731.566-123.894c0-91.443-19.912-163.717-59-214.602-39.822-51.62-99.557-78.169-175.514-78.169-155.608 0-252.212 115.044-252.212 299.408 0 103.247 25.808 180.68 76.692 230.089 45.725 44.248 111.361 66.372 196.168 66.372 78.169 0 150.442-18.435 196.167-48.673l-19.912-125.365c-44.989 24.336-97.345 37.61-156.344 37.61-35.398 0-59.734-7.378-77.434-22.864-19.175-16.223-30.237-42.771-33.921-80.382h303.097c.736-8.85 2.213-50.15 2.213-63.424zm-306.787-48.672c5.16-81.859 27.284-120.205 69.32-120.205 41.3 0 62.688 39.087 65.636 120.205H2191.46z" />
</g>
</g>
</svg>
<svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
viewBox="0 0 2350 2315" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" stroke-width="1"></g>
<g>
<path
d="M1175 0C525.8 0 0 525.8 0 1175c0 552.2 378.9 1010.5 890.1 1139.7-5.9-14.7-8.8-35.3-8.8-55.8v-199.8H734.4c-79.3 0-152.8-35.2-185.1-99.9-38.2-70.5-44.1-179.2-141-246.8-29.4-23.5-5.9-47 26.4-44.1 61.7 17.6 111.6 58.8 158.6 120.4 47 61.7 67.6 76.4 155.7 76.4 41.1 0 105.7-2.9 164.5-11.8 32.3-82.3 88.1-155.7 155.7-190.9-393.6-47-581.6-240.9-581.6-505.3 0-114.6 49.9-223.3 132.2-317.3-26.4-91.1-61.7-279.1 11.8-352.5 176.3 0 282 114.6 308.4 143.9 88.1-29.4 185.1-47 284.9-47 102.8 0 196.8 17.6 284.9 47 26.4-29.4 132.2-143.9 308.4-143.9 70.5 70.5 38.2 261.4 8.8 352.5 82.3 91.1 129.3 202.7 129.3 317.3 0 264.4-185.1 458.3-575.7 499.4 108.7 55.8 185.1 214.4 185.1 331.9V2256c0 8.8-2.9 17.6-2.9 26.4C2021 2123.8 2350 1689.1 2350 1175 2350 525.8 1824.2 0 1175 0z" />
</g>
</g>
</svg>
<svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
viewBox="0 0 2500 2158" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" stroke-width="1">
<g transform="translate(-.157)">
<path
d="M2498.932 499.093c-11.204 242.78-181.152 575.201-509.837 997.268-339.895 440.74-627.499 661.11-862.808 661.11-145.67 0-268.924-134.462-369.776-403.39l-201.693-739.547C480.115 745.61 399.81 611.145 313.904 611.145c-18.675 0-84.04 39.219-196.095 117.656L.155 577.53a31955.67 31955.67 0 00364.171-324.952C528.669 110.644 651.928 35.944 734.1 28.472c194.224-18.675 313.746 113.921 358.567 397.786 48.556 306.277 82.172 496.767 100.845 571.47 56.027 253.986 117.656 380.98 184.887 380.98 52.29 0 130.73-82.172 235.311-246.516 104.584-164.345 160.609-289.47 168.078-375.376 14.94-141.934-41.085-212.9-168.078-212.9-59.762 0-121.392 13.075-184.887 39.219C1552.082 183.48 1787.393-10.745 2134.757.462c257.721 7.471 379.113 173.683 364.17 498.635l.005-.004z" />
</g>
</g>
</svg>
<svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
viewBox="0 0 680 680" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" stroke-width="1">
<g transform="translate(-401 -701)">
<g transform="translate(-293 -236)">
<g transform="translate(463 909)">
<g transform="translate(0 28)">
<g transform="translate(229.885)">
<path
d="M242.088 0c-36.478.027-66 29.582-65.973 66-.027 36.418 29.522 65.973 66 66h66V66.027C308.142 29.608 278.593.054 242.088 0c.027 0 .027 0 0 0zm.23 175H66.912c-36.365.027-65.824 29.576-65.797 65.987-.054 36.41 29.405 65.96 65.77 66.013h175.433c36.366-.027 65.824-29.576 65.797-65.987.027-36.437-29.431-65.986-65.797-66.013zM681.115 240.987c.027-36.411-29.522-65.96-66-65.987-36.478.027-66.027 29.576-66 65.987V307h66c36.478-.027 66.027-29.576 66-66.013zm-175 .214V65.772C506.142 29.506 476.614.054 440.13 0c-36.486.027-66.04 29.48-66.014 65.772v175.429c-.054 36.293 29.501 65.745 65.987 65.799 36.485-.027 66.04-29.48 66.013-65.8zM440.115 680c36.478-.027 66.027-29.582 66-66 .027-36.418-29.522-65.973-66-66h-66v66c-.027 36.392 29.522 65.946 66 66zm-.23-175h175.433c36.366-.027 65.824-29.576 65.797-65.987.054-36.41-29.404-65.96-65.77-66.013H439.912c-36.366.027-65.824 29.576-65.797 65.987-.027 36.437 29.405 65.986 65.77 66.013zM1.115 439c-.027 36.418 29.522 65.973 66 66 36.478-.027 66.027-29.582 66-66v-66h-66c-36.478.027-66.027 29.582-66 66zm175-.249v175.444c-.054 36.296 29.501 65.751 65.987 65.805 36.485-.027 66.04-29.482 66.013-65.778V438.805c.054-36.296-29.501-65.751-65.986-65.805-36.513 0-66.04 29.455-66.014 65.751 0 0 0 .027 0 0z" />
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
viewBox="0 0 1681 417" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" stroke-width="1">
<g>
<path
d="M1621.33 306.03l.578.008c34.43 0 58.659-23.855 58.924-57.992.126-16.904-4.757-32.38-13.753-43.558-9.512-11.834-22.829-18.142-38.516-18.267h-.313c-21.17 0-40.83 16.062-60.1 49.112l-1.533 2.638-.984-2.875c-4.866-14.163-9.2-25.963-11.791-33.025-1.817-4.925-2.617-7.138-2.809-7.854-.925-3.575-3.979-5.796-7.987-5.796-2.463 0-5.08.837-7.554 2.412-2.455 1.563-3.825 3.471-4.317 6.021l-.125.383c-19.287 60.155-35.188 89.359-48.662 89.359-1.959-.017-3.492-.654-4.634-1.93-3.529-3.9-2.662-13.174-1.462-26.016.879-9.433 1.883-20.112 1.466-31.446-.791-21.787-12.716-34.87-31.879-35.012-24.358-.009-40.141 25.933-47.412 41.395l-2.171 4.609-.48-5.083c-1.816-19.134-8.237-41.988-28.512-42.138-23.65 0-41.667 27.75-52.658 51.042l-2.946 6.241.292-6.891c1.304-31.063 2.375-49.404 3.187-54.492.8-5.104.38-8.53-1.292-10.492-1.583-1.837-4.566-2.516-8.941-2.241-7.571.479-11.442 5.087-17.271 20.533-9.575 25.367-33.93 84.383-53.375 84.383-3.858-.029-6.912-1.341-9.15-3.912-8.154-9.346-4.892-34.621-.38-69.592l.342-2.646c2.138-16.558-1.504-20.091-10.5-21.745a15.487 15.487 0 00-2.733-.267c-7.183 0-10.541 6.879-17.25 25.996-11.937 34.016-27.291 69.791-45.241 69.791-.659 0-1.305-.05-1.967-.154-9.513-1.62-9.304-15.729-9.042-33.608.134-9.667.296-20.63-1.191-30.525-2.684-17.758-13.142-28.846-27.313-28.958-28.267 0-47.33 36.2-56.196 57.783l-2.008 4.883-.671-5.242a486.444 486.444 0 01-3.43-41.729l-.024-.52.32-.409c52.905-66.596 76.647-114.654 76.963-155.829.204-26.304-11.933-42.104-32.462-42.267-15.013 0-50.705 12.505-63.109 128.321a669.633 669.633 0 00-3.75 65.45l-.008.434-.246.35c-24.204 35.033-75.862 95.295-126.437 95.295-45.696 0-82.154-36.97-82.154-102.229 0-87.483 61.92-141.196 108.52-141.196h.388c10.125.075 18.808 2.904 25.108 8.18 6.542 5.474 9.971 13.15 9.9 22.191-.091 12.08-4.029 18.288-7.833 24.284-.971 1.545-1.95 3.079-2.842 4.704-.9 1.641-1.72 4.02-.525 6.058 1.225 2.087 4.354 3.4 8.167 3.43 11.091 0 27.866-16.06 28.05-40.25.192-25.322-21.138-51.413-59.192-51.413-57.587 0-135.15 63.266-135.15 165.8 0 72.529 45.475 122.658 107.075 122.658 43.713 0 86.954-31.3 125.25-83.58l2.346-3.166.167 3.934c.812 19.137 2.2 34.212 3.212 45.224.654 7.08 1.13 12.192 1.113 15.013-.05 6.18.954 10.48 3.091 13.112 2.13 2.638 5.513 3.884 10.646 3.917 8.6 0 10.325-5.862 13.73-20.329l.978-4.13c4.234-17.528 19.867-74.745 43.38-74.745 3.841.037 6.804 1.17 8.908 3.4 5.192 5.508 4.625 16.813 3.967 29.908-.417 8.171-.834 16.609-.017 24.83 2.213 22.191 11.796 33.045 29.292 33.17 17.966.009 36.716-19.346 46.612-37.329l1.867-3.387.729 3.808c1.825 9.625 9.992 41.217 35.563 41.217 23.175 0 43.058-24.404 64.85-74.634l2.854-6.558-.175 7.154c-.463 19.034-1.492 42.275-1.5 60.246-.009 13.9 1.396 19.204 7.82 19.204l1.459.067c6.162 0 10.346-3.68 12.433-10.954 16.4-57.155 30.571-83.771 44.613-83.771 13.75.104 15.037 25.246 16.141 69.67l.075 3.117c.334 15.538.896 22.413 10.546 22.484 7.325 0 9.146-5.755 12.934-19.921.725-2.7 1.508-5.663 2.437-8.863 13.242-45.937 24.217-64.679 37.883-64.679 11.7.088 12.35 12.15 12.567 16.113.45 8.487-.425 17.375-1.267 25.954-.787 7.975-1.596 16.225-1.291 23.887.716 17.967 10.55 27.938 27.7 28.067 22.258 0 42.35-26.033 59.946-77.358l1.22-3.575 1.396 3.52c3.196 8.067 7.354 18.988 11.2 32.017l.146.496-.213.47c-17.041 37.834-29.062 79.976-29.233 102.493-.229 29.654 13.188 48.925 34.184 49.087h.362c11.42 0 38.042-4.587 38.558-47.02.213-17.392-3.9-41.984-12.204-73.105l-.954-3.563 3.063 2.042c10.637 7.038 22.591 10.8 34.616 10.9zm-573.697-143.913c.475-10.634 1.371-20.988 2.642-30.78 8.242-63.091 25.433-107.15 41.83-107.15h.074c7.817.059 11.725 5.971 11.646 17.563-.225 28.487-18.275 69.27-53.642 121.217l-2.766 4.066.216-4.916zm522.804 226.82c-2.608 3.476-6.241 5.238-10.791 5.238-5.225-.046-9.15-1.863-11.821-5.433-7.483-9.996-5.375-33.496 6.833-76.15a370.41 370.41 0 014.717-15.234l1.417-4.254 1.245 4.304c14.221 49.238 17.046 80.03 8.4 91.53zm4.426-126.145l-.259-.471-.516-1.638.241-.487c16.217-33.417 34.8-52.571 50.967-52.571h.167c18.258.137 30.883 16.57 30.708 39.942-.121 15.6-7 24.583-12.742 29.37-6.554 5.467-15.283 8.592-23.95 8.592-21.367-.162-36.033-12.458-44.617-22.737zM540.55 300.504c25.033-2 44.892-36.046 52.267-50.596l1.9-3.75.72 4.142c3.542 20.458 14.671 54.833 49.484 55.108h.291c15.059 0 32.142-9.212 49.409-26.633l1.267-1.28.92 1.538c11.625 19.442 27.217 29.771 43.817 28.921 24.438-1.27 39.27-18.587 40.575-30.617.333-3.066-.475-5.954-2.23-7.9-2.195-2.45-5.387-2.733-7.728-.487l-1.121 1.058c-5.688 5.463-16.288 15.642-27.838 16.242-14.141.692-24.6-7.762-31.358-25.212l-.28-.734.476-.616c38.887-50.863 66.175-128.471 63.479-180.525-1.242-24.092-8.246-52.813-34.558-52.813l-1.963.05c-10.079.52-19.246 5.325-27.241 14.27-24.413 27.313-37.188 94.538-32.55 171.267.958 15.942 3.729 30.842 8.225 44.271l.254.754-.513.609c-14.429 16.862-28.667 26.15-40.091 26.15-27.488 0-26.563-46.092-24.392-84.309.47-8.241 1.167-13.491-1.271-16.475-1.742-2.137-4.658-3.191-8.908-3.225l-.496-.004c-9.784 0-11.83 2.013-16.833 16.53-10.413 30.158-30.967 80.77-51.642 80.77-5.73-.054-10.104-2.008-13.1-5.825-10.03-12.8-2.413-44.725 3.704-70.387 1.1-4.613 2.154-9.042 3.058-13.142 1.338-6.083.93-10.52-1.22-13.208-2.159-2.68-6.463-3.763-12.142-3.313-8.854.709-14.517 4.417-17.254 21.254l-.55 3.5-2.059-2.491c-3.866-5.708-11.404-12.508-25.4-12.508-1.225 0-2.495.05-3.808.154-14.933 1.225-31.938 11.629-44.383 27.158-14.53 18.13-21.471 41.075-19.538 64.62.1 1.247.28 2.442.459 3.63l.1.654-.45.496c-8.692 9.467-17.55 14.275-26.326 14.275-13.545-.1-21.316-10.167-21.316-26.938 0-28.225 19.129-113.32 19.129-144.125 0-32.783-14.608-50.629-39.975-50.825h-.383c-37.042 0-65.909 42.03-93.534 128.505a1413.034 1413.034 0 00-7.641 24.975l-3.88 13.004 1.146-13.517a1682.328 1682.328 0 005.238-87.112c1.375-41.792-4.271-68.688-17.275-82.221-7.013-7.3-16.288-10.896-28.371-10.988h-.308c-45.325 0-67.038 76.442-82.85 130.38-4.771 16.283-14.175 53.012-20.454 78.12l3.72-6.046c2.788-31.616 10.867-110.812 10.338-153.779-.575-46.091-15.917-66.754-49.771-67.012h-.417c-18.083 0-30.629 8.987-37.966 16.525C7.358 52.92.017 70.604.425 85.875c.25 9.283 5.946 17.546 10.262 17.546 2.813 0 4.371-3.754 5.046-5.992 10.475-34.62 24.03-51.454 41.421-51.454 7.213.054 12.583 2.18 16.6 6.5 13.592 14.58 11.117 53.946 6.638 125.417-1.45 23.033-3.084 49.129-4.463 78.816-.24 4.899-.527 9.795-.858 14.688-1.321 20.612-2.371 36.904 5.45 38.116 10.175 1.588 16.796-2.545 20.187-12.612 5.025-14.942 16.296-55.78 38.105-130.4 20.925-71.608 36.733-97.662 56.958-97.662 23.367 0 25.108 40.12 20.825 124.787-.913 17.95-2.133 38.28-3.071 60.4-.13 3.108-.275 6.125-.425 9.025-.9 18.32-1.608 32.767 3.625 38.308 1.633 1.725 3.85 2.58 6.787 2.596 10.13 0 13.175-8.879 18.221-23.6.892-2.596 1.838-5.37 2.892-8.27 34.708-95.746 60.37-178.817 94.817-178.817 10.329 0 18.37 8.391 18.37 24.758 0 37.78-18.475 110.775-18.475 147.792 0 13.262 3.817 25.162 11.026 33.529 7.4 8.591 17.754 13.166 29.941 13.27h.267c11.525 0 23.529-5.6 35.696-16.641l1.141-1.033.917 1.237c8.012 10.767 20.938 16.554 34.896 15.48 21.408-1.667 39.37-20.73 46.054-38.705l1.308-3.517 1.304 3.517c4.967 13.338 15.709 29.413 38.663 27.55zM737.817 50.33l.366-.008c2.446 0 4.596 1.225 6.38 3.65 8.5 11.492 8.629 53.437-5.992 101.162-8.354 27.275-19.592 53.042-32.484 74.504l-2.058 3.417-.525-3.954c-1.517-11.542-2.267-23.558-2.792-33.783-3.729-72.138 18.092-144 37.105-144.988zM500.283 218.925c-7.491 30.146-21.858 66.537-47.762 68.62l-2.108.088c-10.746 0-16.771-7.033-17.909-20.916-1.425-17.367 6.063-37.704 19.071-51.825 8.28-8.992 17.62-13.942 26.3-13.942h.175c10.954.083 18.633 8.88 22.162 17.083l.188.425-.117.467zm120.146-110.52c-9.562 0-17.283 7.532-17.358 16.795-.075 9.33 7.6 16.98 17.1 17.05l.137 1.387v-1.387c9.425 0 17.142-7.53 17.217-16.787.075-9.334-7.596-16.984-17.096-17.059zm601.221 0c-9.563 0-17.28 7.532-17.358 16.795-.075 9.33 7.596 16.98 17.1 17.05l.133 1.387v-1.387c9.433 0 17.15-7.53 17.225-16.787.067-9.334-7.6-16.984-17.1-17.059z" />
</g>
</g>
</svg>
</div>
</div>
<svg class="absolute left-0 max-w-md mt-24 -ml-64 left-svg" viewBox="0 0 423 423"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="100%" y1="0%" x2="4.48%" y2="0%" id="linearGradient-1">
<stop stop-color="#5C54DB" offset="0%" />
<stop stop-color="#6A82E7" offset="100%" />
</linearGradient>
<filter x="-9.3%" y="-6.7%" width="118.7%" height="118.7%" filterUnits="objectBoundingBox"
id="filter-3">
<feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" in="shadowBlurOuter1" />
</filter>
<rect id="path-2" x="63" y="504" width="300" height="300" rx="40" />
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity=".9">
<g id="Desktop-HD" transform="translate(-39 -531)">
<g id="Hero" transform="translate(43 83)">
<g id="Rectangle-6" transform="rotate(45 213 654)">
<use fill="#000" filter="url(#filter-3)" xlink:href="#path-2" />
<use fill="url(#linearGradient-1)" xlink:href="#path-2" />
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="relative z-50 flex flex-col items-end justify-center w-full h-full lg:w-1/2 ms:pl-10">
<div class="container relative left-0 w-full max-w-4xl lg:absolute xl:max-w-6xl lg:w-screen">
<img src="https://cdn.devdojo.com/images/september2020/macbook-mockup.png"
class="w-full h-auto mt-20 mb-20 ml-0 lg:mt-24 xl:mt-40 lg:mb-0 lg:h-full lg:-ml-12">
</div>
</div>
</div>
</div>
<!-- HERO SECTION END -->
<!-- BEGIN FEATURES SECTION -->
<div id="features" class="relative w-full px-8 py-10 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
<div class="container flex flex-col items-center justify-between h-full max-w-6xl mx-auto">
<h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our Features</h2>
<h3
class="max-w-2xl px-5 mt-2 text-3xl font-black leading-tight text-center text-gray-900 sm:mt-0 sm:px-0 sm:text-6xl">
Built and Designed with you in Mind</h3>
<div class="flex flex-col w-full mt-0 lg:flex-row sm:mt-10 lg:mt-20">
<div class="w-full max-w-md p-4 mx-auto mb-0 sm:mb-16 lg:mb-0 lg:w-1/3">
<div class="relative flex flex-col items-center justify-center w-full h-full p-20 mr-5 rounded-lg">
<svg class="absolute w-full h-full text-gray-100 fill-current" viewBox="0 0 377 340"
xmlns="http://www.w3.org/2000/svg">
<g>
<g>
<path
d="M342.8 3.7c24.7 14 18.1 75 22.1 124s18.6 85.8 8.7 114.2c-9.9 28.4-44.4 48.3-76.4 62.4-32 14.1-61.6 22.4-95.9 28.9-34.3 6.5-73.3 11.1-95.5-6.2-22.2-17.2-27.6-56.5-47.2-96C38.9 191.4 5 151.5.9 108.2-3.1 64.8 22.7 18 61.8 8.7c39.2-9.2 91.7 19 146 16.6 54.2-2.4 110.3-35.6 135-21.6z" />
</g>
</g>
</svg>
<!-- FEATURE Icon 1 -->
<svg class="relative w-20 h-20" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1TriangleIcon1">
<stop stop-color="#9C09DB" offset="0%" />
<stop stop-color="#1C0FD7" offset="100%" />
</linearGradient>
<filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox"
id="filter-3TriangleIcon1">
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1"
result="shadowBlurOuter1" />
<feColorMatrix
values="0 0 0 0 0.141176471 0 0 0 0 0.031372549 0 0 0 0 0.501960784 0 0 0 0.15 0"
in="shadowBlurOuter1" />
</filter>
<path
d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z"
id="path-2TriangleIcon1" />
</defs>
<g id="Page-1TriangleIcon1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HDTriangleIcon1" transform="translate(-291 -1278)">
<g id="FeaturesTriangleIcon1" transform="translate(170 915)">
<g id="Group-9TriangleIcon1" transform="translate(0 365)">
<g id="Group-8TriangleIcon1" transform="translate(125)">
<g id="Rectangle-9TriangleIcon1">
<use fill="#000" filter="url(#filter-3TriangleIcon1)"
xlink:href="#path-2TriangleIcon1" />
<use fill="url(#linearGradient-1TriangleIcon1)"
xlink:href="#path-2TriangleIcon1" />
</g>
<g id="playTriangleIcon1" transform="translate(18 15)" fill="#FFF"
fill-rule="nonzero">
<path
d="M9.432 2.023l8.919 14.879a1.05 1.05 0 01-.384 1.452 1.097 1.097 0 01-.548.146H-.42A1.07 1.07 0 01-1.5 17.44c0-.19.052-.375.15-.538L7.567 2.023a1.092 1.092 0 011.864 0z"
id="TriangleIcon1" transform="rotate(90 8.5 10)" />
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<h4 class="relative mt-6 text-lg font-bold">Automated Tools</h4>
<p class="relative mt-2 text-base text-center text-gray-600">Automate your workflow with these
top of the
line marketing tools.</p>
<a href="#_" class="relative flex mt-2 text-sm font-medium text-indigo-500 underline">Learn
More</a>
</div>
</div>
<div class="w-full max-w-md p-4 mx-auto mb-0 sm:mb-16 lg:mb-0 lg:w-1/3">
<div class="relative flex flex-col items-center justify-center w-full h-full p-20 mr-5 rounded-lg">
<svg class="absolute w-full h-full text-gray-100 fill-current" viewBox="0 0 358 372"
xmlns="http://www.w3.org/2000/svg">
<g>
<g>
<path
d="M315.7 6.5c30.2 15.1 42.6 61.8 41.5 102.5-1.1 40.6-15.7 75.2-24.3 114.8-8.7 39.7-11.3 84.3-34.3 107.2-23 22.9-66.3 23.9-114.5 30.7-48.2 6.7-101.3 19.1-123.2-4.1-21.8-23.2-12.5-82.1-21.6-130.2C30.2 179.3 2.6 141.9.7 102c-2-39.9 21.7-82.2 57.4-95.6 35.7-13.5 83.3 2.1 131.2 1.7 47.9-.4 96.1-16.8 126.4-1.6z" />
</g>
</g>
</svg>
<!-- FEATURE Icon 2 -->
<svg class="relative w-20 h-20" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1Icon2">
<stop stop-color="#F2C314" offset="0%" />
<stop stop-color="#FC3832" offset="100%" />
</linearGradient>
<filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox"
id="filter-3Icon2">
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1"
result="shadowBlurOuter1" />
<feColorMatrix
values="0 0 0 0 0.501960784 0 0 0 0 0.125490196 0 0 0 0 0 0 0 0 0.15 0"
in="shadowBlurOuter1" />
</filter>
<path
d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z"
id="path-2Icon2" />
</defs>
<g id="Page-1Icon2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HDIcon2" transform="translate(-691 -1278)">
<g id="FeaturesIcon2" transform="translate(170 915)">
<g id="Group-9-CopyIcon2" transform="translate(400 365)">
<g id="Group-8Icon2" transform="translate(125)">
<g id="Rectangle-9Icon2">
<use fill="#000" filter="url(#filter-3Icon2)"
xlink:href="#path-2Icon2" />
<use fill="url(#linearGradient-1Icon2)" xlink:href="#path-2Icon2" />
</g>
<g id="machine-learningIcon2" transform="translate(14 12)" fill="#FFF"
fill-rule="nonzero">
<path
d="M10.554 21.418v-2.68c-1.1-.204-1.932-1.143-1.932-2.271 0-.468.143-.903.388-1.267l-2.32-1.662L4.367 15.2a2.254 2.254 0 01-.005 2.541l5.28 4.05c.268-.182.577-.311.911-.373zm.892 0c.334.062.643.191.912.373l5.28-4.05a2.254 2.254 0 01-.006-2.54l-2.321-1.663L12.99 15.2c.245.364.388.8.388 1.267 0 1.128-.832 2.067-1.932 2.27v2.681zm1.538.997c.25.365.394.803.394 1.274C13.378 24.965 12.314 26 11 26s-2.378-1.035-2.378-2.311c0-.471.145-.91.394-1.274l-5.28-4.05c-.385.26-.853.413-1.358.413C1.065 18.778 0 17.743 0 16.467c0-1.129.832-2.068 1.932-2.27v-2.393C.832 11.6 0 10.662 0 9.534c0-1.277 1.065-2.312 2.378-2.312.505 0 .973.153 1.358.414l5.28-4.05a2.254 2.254 0 01-.394-1.275C8.622 1.035 9.686 0 11 0s2.378 1.035 2.378 2.311c0 .471-.145.91-.394 1.274l5.28 4.05c.385-.26.853-.413 1.358-.413C20.935 7.222 22 8.257 22 9.533c0 1.129-.832 2.068-1.932 2.27v2.393c1.1.203 1.932 1.142 1.932 2.27 0 1.277-1.065 2.312-2.378 2.312-.505 0-.973-.153-1.358-.414l-5.28 4.05zm-9.243-7.843L5.937 13l-2.196-1.572c-.27.183-.58.314-.917.376v2.392c.336.062.647.193.917.376zm.627-3.772l2.321 1.662L9.01 10.8a2.254 2.254 0 01-.388-1.267c0-1.128.832-2.067 1.932-2.27V4.582a2.403 2.403 0 01-.912-.373l-5.28 4.05a2.254 2.254 0 01.006 2.54zm13.89 3.772c.27-.183.582-.314.918-.376v-2.392a2.403 2.403 0 01-.917-.376L16.063 13l2.196 1.572zm-.62-6.313l-5.28-4.05a2.403 2.403 0 01-.912.373v2.68c1.1.204 1.932 1.143 1.932 2.271 0 .468-.143.903-.388 1.267l2.32 1.662 2.322-1.662a2.254 2.254 0 01.005-2.541zm-8 6.313A2.415 2.415 0 0111 14.156c.507 0 .977.154 1.363.416L14.559 13l-2.196-1.572a2.415 2.415 0 01-1.363.416c-.507 0-.977-.154-1.363-.416L7.441 13l2.196 1.572zM11 10.978c.821 0 1.486-.647 1.486-1.445 0-.797-.665-1.444-1.486-1.444s-1.486.647-1.486 1.444c0 .798.665 1.445 1.486 1.445zm0 6.933c.821 0 1.486-.647 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.486.647-1.486 1.445c0 .797.665 1.444 1.486 1.444zm8.622-6.933c.82 0 1.486-.647 1.486-1.445 0-.797-.665-1.444-1.486-1.444s-1.487.647-1.487 1.444c0 .798.666 1.445 1.487 1.445zm0 6.933c.82 0 1.486-.647 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.487.647-1.487 1.445c0 .797.666 1.444 1.487 1.444zM2.378 10.978c.821 0 1.487-.647 1.487-1.445 0-.797-.666-1.444-1.487-1.444-.82 0-1.486.647-1.486 1.444 0 .798.665 1.445 1.486 1.445zm0 6.933c.821 0 1.487-.647 1.487-1.444 0-.798-.666-1.445-1.487-1.445-.82 0-1.486.647-1.486 1.445 0 .797.665 1.444 1.486 1.444zM11 25.133c.821 0 1.486-.646 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.486.647-1.486 1.445.665 1.444 1.486 1.444zm0-21.377c.821 0 1.486-.647 1.486-1.445S11.821.867 11 .867s-1.486.646-1.486 1.444c0 .798.665 1.445 1.486 1.445z"
id="ShapeIcon2" />
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<h4 class="relative mt-6 text-lg font-bold">Machine Learning</h4>
<p class="relative mt-2 text-base text-center text-gray-600">Your Marketing tools will learn how
to better
convert and sell.</p>
<a href="#_" class="relative flex mt-2 text-sm font-medium text-indigo-500 underline">Learn
More</a>
</div>
</div>
<div class="w-full max-w-md p-4 mx-auto mb-16 lg:mb-0 lg:w-1/3">
<div class="relative flex flex-col items-center justify-center w-full h-full p-20 mr-5 rounded-lg">
<svg class="absolute w-full h-full text-gray-100 fill-current" viewBox="0 0 378 410"
xmlns="http://www.w3.org/2000/svg">
<g>
<g>
<path
d="M305.9 14.4c23.8 24.6 16.3 84.9 26.6 135.1 10.4 50.2 38.6 90.3 43.7 137.8 5.1 47.5-12.8 102.4-50.7 117.4-37.9 15.1-95.7-9.8-151.7-12.2-56.1-2.5-110.3 17.6-130-3.4-19.7-20.9-4.7-82.9-11.5-131.2C25.5 209.5-3 174.7 1.2 147c4.2-27.7 41-48.3 75-69.6C110.1 56.1 141 34.1 184 17.5c43.1-16.6 98.1-27.7 121.9-3.1z" />
</g>
</g>
</svg>
<!-- FEATURE Icon 3 -->
<svg class="relative w-20 h-20" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1Icon3">
<stop stop-color="#32FBFC" offset="0%" />
<stop stop-color="#3214F2" offset="100%" />
</linearGradient>
<filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox"
id="filter-3Icon3">
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1"
result="shadowBlurOuter1" />
<feColorMatrix
values="0 0 0 0 0.031372549 0 0 0 0 0.149019608 0 0 0 0 0.658823529 0 0 0 0.15 0"
in="shadowBlurOuter1" />
</filter>
<path
d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z"
id="path-2Icon3" />
</defs>
<g id="Page-1Icon3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HDIcon3" transform="translate(-1091 -1278)">
<g id="FeaturesIcon3" transform="translate(170 915)">
<g id="Group-9-Copy-2Icon3" transform="translate(800 365)">
<g id="Group-8Icon3" transform="translate(125)">
<g id="Rectangle-9Icon3">
<use fill="#000" filter="url(#filter-3Icon3)"
xlink:href="#path-2Icon3" />
<use fill="url(#linearGradient-1Icon3)" xlink:href="#path-2Icon3" />
</g>
<g id="smart-notificationsIcon3" transform="translate(15 11)"
fill="#FFF" fill-rule="nonzero">
<path
d="M12.519 3.243a6.808 6.808 0 00-.187 1.298h-8.44a2.595 2.595 0 00-2.595 2.594v12.973a2.595 2.595 0 002.595 2.595h12.973a2.595 2.595 0 002.594-2.595v-8.44c.445-.02.88-.084 1.298-.187v8.627A3.892 3.892 0 0116.865 24H3.892A3.892 3.892 0 010 20.108V7.135a3.892 3.892 0 013.892-3.892h8.627zm6.616 6.487a4.865 4.865 0 110-9.73 4.865 4.865 0 010 9.73z"
id="IconIcon3" />
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<h4 class="relative mt-6 text-lg font-bold">Smart Notifications</h4>
<p class="relative mt-2 text-base text-center text-gray-600">Our smart notifications will notify
you when
users convert.</p>
<a href="#_" class="relative flex mt-2 text-sm font-medium text-indigo-500 underline">Learn
More</a>
</div>
</div>
</div>
</div>
</div>
<!-- END FEATURES SECTION -->
<!-- Pricing Section -->
<div class="relative px-8 py-10 bg-white border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
<div id="pricing" class="container flex flex-col items-center h-full max-w-6xl mx-auto">
<h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our Pricing</h2>
<h3
class="w-full max-w-2xl px-5 px-8 mt-2 text-2xl font-black leading-tight text-center text-gray-900 sm:mt-0 sm:px-0 sm:text-6xl md:px-0">
Simple, Transparent Pricing for Everyone</h3>
<div class="max-w-full mx-auto md:max-w-6xl sm:px-8">
<!-- Basic Pricing -->
<div class="relative flex flex-col items-center block sm:flex-row">
<div
class="relative z-0 w-11/12 max-w-sm my-8 border border-gray-200 rounded-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-mr-4">
<div class="overflow-hidden text-black bg-white border-t border-gray-100 rounded-lg shadow-sm">
<div
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
<h3 class="p-3 text-lg font-bold tracking-wide text-center uppercase">Basic<span
class="ml-2 font-light">Plan</span></h3>
<h4
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>48</h4>
<p class="text-sm text-gray-600">In our basic plan you can take advantage of all these
features below.
</p>
</div>
<div class="flex flex-wrap px-6 mt-8">
<ul>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">Awesome Feature</span>
</li>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">And Another Cool Feature</span>
</li>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">One More Feature</span>
</li>
</ul>
</div>
<div class="flex items-center block p-8 uppercase">
<a href="#_"
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
This Plan</a>
</div>
</div>
</div>
<!-- Pro Pricing -->
<div
class="relative z-10 w-full max-w-md my-8 bg-white rounded-lg shadow-lg sm:w-2/3 lg:w-1/3 sm:my-5">
<div
class="py-4 text-sm font-semibold leading-none tracking-wide text-center text-white uppercase bg-indigo-500 rounded-t">
Most Popular</div>
<div class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Pro<span
class="ml-2 font-light">Plan</span></h3>
<h4
class="flex items-center justify-center pb-6 text-5xl font-bold text-center text-gray-900">
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>98</h4>
<p class="text-sm text-gray-600">Our most popular package is the Pro Plan which gives you
access to the
following:</p>
</div>
<div class="flex justify-start pl-12 mt-8 sm:justify-start">
<ul>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">Really Cool Features</span>
</li>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">Another Cool Feature</span>
</li>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">And One More</span>
</li>
</ul>
</div>
<div class="flex items-center block p-8 uppercase">
<a href="#_"
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-indigo-600">Select
This Plan</a>
</div>
</div>
<!-- Premium Pricing -->
<div
class="relative z-0 w-11/12 max-w-sm my-8 rounded-lg shadow-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-ml-4">
<div class="overflow-hidden text-black bg-white rounded-lg shadow-lg shadow-inner">
<div
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-8">
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Premium<span
class="ml-2 font-light">Plan</span></h3>
<h4
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>78</h4>
<p class="pl-2 text-sm text-gray-600">With our premium plan you can take advantage of
all the following
features:</p>
</div>
<div class="flex flex-wrap px-8 mt-8">
<ul>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">Totally Tubular Feature</span>
</li>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">Super Cool Feature</span>
</li>
<li class="flex items-center">
<div class="p-2 text-green-500 rounded-full fill-current ">
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<span class="ml-3 text-lg text-gray-700">And One More</span>
</li>
</ul>
</div>
<div class="flex items-center block p-8 uppercase">
<a href="#_"
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
This Plan</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Pricing Section -->
<!-- Start Testimonials -->
<div id="testimonials"
class="flex items-center justify-center w-full px-8 py-10 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
<div class="max-w-6xl mx-auto">
<div class="flex-col items-center ">
<div class="flex flex-col items-center justify-center w-full h-full max-w-2xl pr-8 mx-auto text-center">
<p class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our customers love
our product
</p>
<h2
class="text-4xl font-extrabold leading-10 tracking-tight text-gray-900 sm:text-5xl sm:leading-none md:text-6xl lg:text-5xl xl:text-6xl">
Testimonials</h2>
<p class="my-6 text-xl font-medium text-gray-500">Don't just take our word for it, read from our
extensive
list of case studies and customer testimonials.</p>
</div>
<div class="flex flex-col items-center justify-center max-w-2xl py-8 mx-auto xl:flex-row xl:max-w-full">
<div class="w-full xl:w-1/2 xl:pr-8">
<blockquote
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
<div class="flex flex-col pr-8">
<div class="relative pl-12">
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
<path
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
</svg>
<p class="mt-2 text-base text-gray-600">I'm loving these templates! Very nice
features and layouts.
</p>
</div>
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Sandra
Walton <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
SomeCompany</span></h3>
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
</div>
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2694&q=80"
alt="">
</blockquote>
<blockquote
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 mt-16 mb-16 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease xl:mb-0">
<div class="flex flex-col pr-10">
<div class="relative pl-12">
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
<path
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
</svg>
<p class="mt-2 text-base text-gray-600">Really digging this service. Now I can
quickly bootstrap any
project.</p>
</div>
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Kenny
Jones <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
SomeCompany</span></h3>
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
</div>
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
src="https://images.unsplash.com/photo-1546820389-44d77e1f3b31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80"
alt="">
</blockquote>
</div>
<div class="w-full xl:w-1/2 xl:pl-8">
<blockquote
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
<div class="flex flex-col pr-10">
<div class="relative pl-12">
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
<path
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
</svg>
<p class="mt-2 text-base text-gray-600">Extremely helpful in every single project we
have released.
</p>
</div>
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Mike Smith
<span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
</h3>
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
</div>
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1700&q=80"
alt="">
</blockquote>
<blockquote
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 mt-16 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
<div class="flex flex-col pr-10">
<div class="relative pl-12">
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
<path
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
</svg>
<p class="mt-2 text-base text-gray-600">Finally a quick and easy system I can use
for any type of
project.</p>
</div>
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Molly
Sanchez <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
SomeCompany</span></h3>
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
</div>
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80"
alt="">
</blockquote>
</div>
</div>
</div>
</div>
</div>
<!-- End Testimonials-->
<footer class="px-4 pt-12 pb-8 text-white bg-white border-t border-gray-200">
<div class="container flex flex-col justify-between max-w-6xl px-4 mx-auto overflow-hidden lg:flex-row">
<div class="w-full pl-12 mr-4 text-left lg:w-1/4 sm:text-center sm:pl-0 lg:text-left">
<a href="/"
class="flex justify-start block text-left sm:text-center lg:text-left sm:justify-center lg:justify-start">
<span class="flex items-start sm:items-center">
<svg class="w-auto h-6 text-gray-800 fill-current" viewBox="0 0 194 116"
xmlns="http://www.w3.org/2000/svg">
<g fill-rule="evenodd">
<path
d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z">
</path>
<path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z"></path>
</g>
</svg>
</span>
</a>
<p class="mt-6 mr-4 text-base text-gray-500">Crafting the next-level of user experience and engagement.
</p>
</div>
<div class="block w-full pl-10 mt-6 text-sm lg:w-3/4 sm:flex lg:mt-0">
<ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
<li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
Product</li>
<li><a href="#_"
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Features</a>
</li>
<li><a href="#_"
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Integrations</a>
</li>
<li><a href="#_"
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Pricing</a>
</li>
<li><a href="#_"
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">FAQ</a></li>
</ul>
<ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
<li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
Company</li>
<li><a href="#_"
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Privacy</a>
</li>
<li><a href="#_" class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Terms
of
Service</a></li>
</ul>
<ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
<li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
TailwindCSS
</li>
<li><a href="https://devdojo.com/tailwindcss/components"
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Tailwind
Components</a></li>
<li><a href="https://devdojo.com/tailwindcss/templates"
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Tailwind
Templates</a></li>
<li><a href="https://devdojo.com/tails"
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Tails</a></li>
</ul>
<div class="flex flex-col w-full text-gray-700">
<div class="inline-block px-3 py-2 mt-5 font-bold text-gray-800 uppercase md:mt-0">Follow Us</div>
<div class="flex justify-start pl-4 mt-2">
<a class="flex items-center block mr-6 text-gray-400 no-underline hover:text-gray-600"
target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
<svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z" />
</svg>
</a>
<a class="flex items-center block mr-6 text-gray-400 no-underline hover:text-gray-600"
target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
<svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z" />
</svg>
</a>
<a class="flex items-center block text-gray-400 no-underline hover:text-gray-600"
target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
<svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="pt-4 pt-6 mt-10 text-center text-gray-400 border-t border-gray-100">© 2020 Landmark. All rights
reserved.</div>
</footer>
<!-- a little JS for the mobile nav button -->
<script>
if (document.getElementById('nav-mobile-btn')) {
document.getElementById('nav-mobile-btn').addEventListener('click', function () {
if (this.classList.contains('close')) {
document.getElementById('nav').classList.add('hidden');
this.classList.remove('close');
} else {
document.getElementById('nav').classList.remove('hidden');
this.classList.add('close');
}
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flare - Landing Page</title>
<!--
For more customization options, we would advise
you to build your TailwindCSS from the source.
https://tailwindcss.com/docs/installation
-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.2/tailwind.css">
<style>
/* small css for the mobile nav close */
#nav-mobile-btn.close span:first-child{
transform: rotate(45deg);
top: 4px;
position: relative;
background:#a0aec0;
}
#nav-mobile-btn.close span:nth-child(2){
transform: rotate(-45deg);
margin-top: 0px;
background:#a0aec0;
}
</style>
</head>
<body class="overflow-x-hidden antialiased">
<div class="relative z-20 w-full h-24 px-8 pt-2 bg-white">
<div class="container flex items-center justify-between h-full max-w-6xl mx-auto">
<a href="#_" class="relative flex items-center inline-block h-5 h-full font-black">
<svg class="w-auto h-8 mt-1" viewBox="0 0 215 151" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="56.965%" y1="53.262%" x2="7.891%" y2="29.24%" id="b"><stop stop-color="#FFCD26" offset="0%"/><stop stop-color="#FFDF95" offset="100%"/></linearGradient><path d="M95.655.001c-24.386 0-43.538 13.864-52.36 34.66-5.144 12.126-3.711 24.522.084 29.027 2.435-5.804 11.57-15.424 29.476-15.424h79.952c29.783 0 54.375-30.377 61.963-48.263H95.655zM67.693 65.916C23.419 65.916.085 105.344 0 137.666v.345c.011 4.322.439 8.517 1.291 12.466 2.433-5.804 19.956-36.297 47.062-36.297h23.225c29.783 0 54.375-30.378 61.963-48.264H67.693z" id="a"/></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="#fff"><use xlink:href="#a"/></mask><path d="M95.655.001c-24.386 0-43.538 13.864-52.36 34.66-5.144 12.126-3.711 24.522.084 29.027 2.435-5.804 11.57-15.424 29.476-15.424h79.952c29.783 0 54.375-30.377 61.963-48.263H95.655zM67.693 65.916C23.419 65.916.085 105.344 0 137.666v.345c.011 4.322.439 8.517 1.291 12.466 2.433-5.804 19.956-36.297 47.062-36.297h23.225c29.783 0 54.375-30.378 61.963-48.264H67.693z" fill="url(#b)" mask="url(#c)"/></g></svg>
<span class="ml-3 text-2xl font-black">Flare</span>
</a>
<div id="nav" class="absolute top-0 left-0 hidden block w-full mt-20 border-b border-gray-200 sm:border-none sm:px-5 sm:block sm:relative sm:mt-0 sm:px-0 sm:w-auto">
<nav class="flex flex-col items-center py-3 bg-white border border-gray-100 sm:flex-row sm:bg-transparent sm:border-none sm:py-0">
<a href="#_" class="relative px-1 mb-1 mb-5 mr-0 text-base font-bold sm:mb-0 sm:mr-4 lg:mr-8">Home<span class="absolute bottom-0 left-0 w-full h-1 -mb-2 bg-yellow-300 rounded-full"></span></a>
<a href="#_" class="px-1 mb-1 mb-5 mr-0 text-base font-bold sm:mb-0 sm:mr-4 lg:mr-8">Pages</a>
<a href="#_" class="px-1 mb-1 mb-5 mr-0 text-base font-bold sm:mb-0 sm:mr-4 lg:mr-8">Contact</a>
<a href="#_" class="px-1 mb-1 mb-5 mr-0 text-base font-bold sm:mb-0 sm:mr-4 lg:mr-8">About</a>
<a href="#_" class="relative mb-5 sm:mb-0">
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-black rounded"></span>
<span class="relative inline-block w-full h-full px-3 py-1 text-base font-bold transition duration-100 bg-white border-2 border-black rounded fold-bold hover:bg-yellow-400 hover:text-gray-900">SIGNUP</span>
</a>
</nav>
</div>
<div id="nav-mobile-btn" class="absolute top-0 right-0 z-50 block w-6 mt-8 mr-10 cursor-pointer select-none sm:hidden sm:mt-10">
<span class="block w-full h-1 mt-2 duration-200 transform bg-gray-800 rounded-full sm:mt-1"></span>
<span class="block w-full h-1 mt-1 duration-200 transform bg-gray-800 rounded-full"></span>
</div>
</div>
</div>
<!-- BEGIN HERO SECTION -->
<div class="relative items-center justify-center w-full w-screen h-screen">
<div class="container flex flex-col items-center justify-center h-full max-w-6xl pl-0 mx-auto -mt-24 sm:pl-8 xl:pl-0 md:flex-row md:justify-between">
<div class="flex flex-col items-center w-5/6 md:items-start sm:w-1/2 lg:w-3/8 lg:mt-10">
<div class="relative">
<h1 class="relative mb-4 text-4xl font-black leading-none text-center text-black lg:text-5xl xl:text-6xl md:text-left">Master the Art of Marketing</h1>
<svg class="absolute top-0 right-0 hidden w-20 -mt-16 -mr-10 transform rotate-90 lg:block xl:-mr-8 xl:-mt-12" viewBox="0 0 89 96" xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(-80 49.934 46.34)" fill-rule="nonzero" fill="none">
<path d="M57.5 74.93c0 4.239 3.451 7.676 7.708 7.676 4.256 0 7.707-3.437 7.707-7.677s-3.45-7.676-7.707-7.676-7.707 3.437-7.707 7.676zm10.277 0a2.564 2.564 0 01-2.569 2.558 2.564 2.564 0 01-2.57-2.559 2.564 2.564 0 012.57-2.559 2.564 2.564 0 012.569 2.56zM35.914 44.836c0-4.24-3.45-7.676-7.707-7.676-4.256 0-7.707 3.437-7.707 7.676 0 4.24 3.45 7.677 7.707 7.677s7.707-3.437 7.707-7.677zm-10.276 0a2.564 2.564 0 012.57-2.558 2.564 2.564 0 012.568 2.558 2.564 2.564 0 01-2.569 2.56 2.564 2.564 0 01-2.569-2.56z" fill="#9D45FF" />
<ellipse fill="#2F36FF" cx="5.281" cy="49.345" rx="5.138" ry="5.118" />
<path d="M60.656 26.976a2.564 2.564 0 002.57 2.559 2.564 2.564 0 002.568-2.56v-2.558a2.564 2.564 0 00-2.569-2.559 2.564 2.564 0 00-2.569 2.56v2.558zM63.225 9.064a2.564 2.564 0 00-2.569 2.559v2.559a2.564 2.564 0 002.57 2.558 2.564 2.564 0 002.568-2.558v-2.56a2.564 2.564 0 00-2.569-2.558zM70.932 16.74h-2.569a2.564 2.564 0 00-2.569 2.56 2.564 2.564 0 002.57 2.558h2.568a2.564 2.564 0 002.57-2.559 2.564 2.564 0 00-2.57-2.559zM58.087 16.74h-2.569a2.564 2.564 0 00-2.569 2.56 2.564 2.564 0 002.57 2.558h2.568a2.564 2.564 0 002.57-2.559 2.564 2.564 0 00-2.57-2.559zM91.068 44.466a2.564 2.564 0 00-2.421 2.7 2.564 2.564 0 002.69 2.431l2.555-.134a2.564 2.564 0 002.421-2.7 2.564 2.564 0 00-2.69-2.43l-2.555.133zM85.404 48.852a2.564 2.564 0 00-2.69-2.432l-2.556.134a2.564 2.564 0 00-2.42 2.7 2.564 2.564 0 002.69 2.431l2.555-.134a2.564 2.564 0 002.42-2.7zM88.24 42.85l-.134-2.565a2.564 2.564 0 00-2.69-2.432 2.564 2.564 0 00-2.421 2.7l.134 2.565a2.564 2.564 0 002.69 2.432 2.564 2.564 0 002.421-2.7zM91.78 55.198l-.134-2.566a2.564 2.564 0 00-2.69-2.431 2.564 2.564 0 00-2.42 2.7l.134 2.565a2.564 2.564 0 002.69 2.431 2.564 2.564 0 002.42-2.699z" fill="#FFCE27" />
<path d="M61.132 60.396a2.564 2.564 0 002.569-2.559V44.99a2.564 2.564 0 00-2.57-2.559H48.234a2.564 2.564 0 00-2.57 2.56v12.847a2.564 2.564 0 002.57 2.56h12.899zm-10.33-12.848h7.76v7.73h-7.76v-7.73z" fill="#2F36FF" />
<path d="M38.127 11.425a2.566 2.566 0 00-2.073-1.74l-7.54-1.093-3.363-6.804A2.676 2.676 0 0022.846.476c-.947 0-1.823.5-2.304 1.312l-3.378 6.804-7.54 1.093a2.566 2.566 0 00-2.076 1.74 2.552 2.552 0 00.647 2.623l5.454 5.297-1.284 7.48a2.554 2.554 0 001.017 2.512c.793.576 1.846.651 2.713.194l6.744-3.541 6.743 3.531a2.578 2.578 0 002.706-.194 2.554 2.554 0 001.022-2.503l-1.284-7.48 5.456-5.296a2.552 2.552 0 00.645-2.623zm-10.664 5.194a2.553 2.553 0 00-.74 2.262l.637 3.698-3.327-1.748a2.578 2.578 0 00-2.389 0l-3.34 1.745.638-3.697a2.553 2.553 0 00-.728-2.26l-2.7-2.617 3.728-.54a2.568 2.568 0 001.935-1.4l1.662-3.36 1.664 3.36a2.568 2.568 0 001.932 1.4l3.725.54-2.697 2.617z" fill="#FFCE27" />
</g>
</svg>
</div>
<p class="my-3 text-base text-center text-gray-600 xl:text-xl md:text-left">Leverage our powerful tools to take advantage of the ground-breaking marketing strategies built for designers and developers.</p>
<a href="#_" class="relative mt-5">
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-black rounded"></span>
<span class="relative inline-block w-full h-full px-8 py-3 text-base font-bold bg-white border-2 border-black rounded hover:bg-yellow-400 xl:text-xl fold-bold">Signup Today!</span>
</a>
</div>
<div class="flex flex-col items-end justify-center w-5/6 h-auto pl-0 pr-0 mt-10 sm:pl-20 sm:pr-8 xl:pr-0 md:mt-0 md:h-full sm:w-2/3">
<!-- HERO SVG IMAGE -->
<svg class="w-full h-auto" viewBox="0 0 273 190" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-1)" fill-rule="nonzero" fill="none">
<path d="M87.27 99.64h-4.33a3.75 3.75 0 01-3.74-3.73v-7.9a3.75 3.75 0 013.74-3.73h22.94a3.75 3.75 0 013.74 3.73v7.9a3.75 3.75 0 01-3.74 3.73H87.27z" fill="#1A1A1A" />
<path d="M16.64 123.09s-7.86 11.7-10.86 20.41c-3 8.71-7.46 19.49-1.43 24.42 6.03 4.93 12.52.52 12.52.52s.19 6.05 0 10.91-.54 9.7-.54 9.7l48.72.45s-2-10.09-2.6-16.15c-.6-6.06-.83-9.79-.83-9.79s8.05 1.5 10.49.65c2.44-.85 25.16-32.71 25.16-32.71l2.85-15.08a12.53 12.53 0 00-9.92-5.65c-7.13-.56-10.32 1.73-10.32 1.73l-7.41 22.16-7.08 5.49s-3.16-.71-6.2-9.49c-3.04-8.78-7.07-15.84-16.71-17.39-9.64-1.55-25.84 9.82-25.84 9.82z" fill="#FFCE26" />
<path d="M38.27 119.01s6.78-3.36 6.42-8.63c-.41-6.14-5.33-9.66-8.13-10.22l.48-6.68a13.07 13.07 0 009.54-9.09l1 4.5s1.24-1 2.25-4.22c1.3-4.12-2.51-7.48-5.29-8.11-4.16-.94-7.54-.34-8.62 1l-.75 1a11.36 11.36 0 00-11.71.33s-4.79 3.34-1.59 7c0 0-4.19.81-4.89 4.78-.7 3.97 2.53 7.49 2.53 7.49s-5.48 0-6.28 4.62c-.8 4.62 4.4 8 4.4 8s-6.16 2.05-6 7.09c.15 4.63 5.25 6.19 8 5.64a5.89 5.89 0 003-1.08 10.24 10.24 0 0010.15 4.49c5.18-.67 5.89-4.33 5.91-5a25.82 25.82 0 00-.42-2.91z" fill="#FFF" />
<path d="M198.56 112.66a10.09 10.09 0 017.11 2c3.58 2.6 4.3 6.79 3.62 10.34 0 0 4.78.6 7.87 2.9s5.45 5.12 10 15.82 6.54 17.17 7.92 23.12c1.38 5.95 1.84 11.08 1 15.59a18.37 18.37 0 01-2.48 6.86h-74.19l-.9-53.57s5.21-9.86 19.92-11.83a8.35 8.35 0 013.45-9.39c5.4-3.7 16.68-1.84 16.68-1.84z" fill="#FFCE26" />
<path d="M197.32 108.4s3.62 2.08 5.78-1a3.94 3.94 0 00-1.43-6c-1.16-.42-4-1.05-5.35 1.25l-.5.5s-1.34-3.6-.41-6.57v-.92s-5.45.9-7.49 1c-1.81.13-3.7-.1-7.42-1.31 0 0-.32 12.84-.18 15.64.14 2.8 1.86 5.1 4.49 5.36v6.69l-2.63.33s3.22 3.6 5.49 3.62a48.63 48.63 0 0010.7-2.27 21.74 21.74 0 012.28-.86l-1.77-.26-1.08-14.44-.48-.76zM202.28 162.68s-5.4-7.26-7.21-8.81c-1.81-1.55-4.26-3.32-7.17-3.59l-4.35 4.74-2.34.51 3.78 11.82 3.55-.51s2.09.48 3.91 4.94a16 16 0 006.11-4.59 35.62 35.62 0 003.72-4.51zM180.13 153l2.52-3.3s-3.09.61-3.34 1.34l.82 1.96zM98.37 113.86s1.94-4 2-6.57c.06-2.57-1-3.88-2.41-3.85a3.12 3.12 0 00-3.56-2.25l2.67-8.09s.44-2.57-1.51-2.82-3 2.93-3 2.93l-3.66 11s-.49 2.15-2 2.15a2.25 2.25 0 01-2.3-2.1c0-.83-1.16-3.24-3.09-2.95-1.93.29-1.52 2-.56 5.45s1.36 4.55 1.36 4.55a17.43 17.43 0 018.75-.43 23 23 0 017.31 2.98z" fill="#FFF" />
<path d="M141.78 135.99h32.62l15.42 45.31h-33.55a5.56 5.56 0 00-.33-2.92c-.61-2.09-14.16-42.39-14.16-42.39zM187.08 145.12l1.2-1.42 2.92 2.46-1.34 1.3z" fill="#FFF" />
<path fill="#FFCE26" d="M187.08 145.12l2.92 2.61-6.26 7.29-2.57.51-.81-2.39z" />
<path d="M191.62 108.2s-1.79 1.3-1.68 2.67a6 6 0 00.31 1.79s-4.19.93-4.27-1c-.05-1.27 1.14-1.46 1.86-1.46.72 0 1.82 0 1.76-.82-.06-.82.88-2.88 2.02-1.18zM202.42 101.58s2.88-4.27 2.66-7.92c-.22-3.65-2.46-5.57-6.35-5.95 0 0-3.49-4.12-6.88-3.82a13.11 13.11 0 00-5.93 2.17s-6.3-1.47-9.05 3.42c-2.75 4.89 1.83 9 3.34 9.52l.09-3.7a18.63 18.63 0 008.31 1.3 64.88 64.88 0 007-1s-1.25 4.73.24 7.16a4.59 4.59 0 013.59-1.83c2.3.03 2.98.65 2.98.65z" fill="#1A1A1A" />
<path d="M159.52 40.14V21.63a8.27 8.27 0 018.25-8.25h60.22a8.27 8.27 0 018.25 8.25v33.52a8.28 8.28 0 01-8.25 8.25h-60.22a8.28 8.28 0 01-8.25-8.25V40.14z" fill="#FFCE26" />
<path d="M71.46 134.29l4.49-2.42 59.23-.14a9.36 9.36 0 017 5.57l13.59 41.08s2.35 8.67-6.73 10.89l-3.21-.08-74.37-54.9z" fill="#FFF" />
<path d="M143.64 189.5H87.11a8.61 8.61 0 01-8.2-5.67L65.5 145.11c-1.86-5.36 2.31-10.88 8.2-10.88h56.54a8.62 8.62 0 018.2 5.67l13.44 38.71c1.82 5.35-2.34 10.89-8.24 10.89z" fill="#1A1A1A" />
<path d="M106.88 160.63c1.72 3 1.53 6.32-.43 7.45s-4.95-.36-6.68-3.35c-1.73-2.99-1.52-6.32.44-7.45s4.91.37 6.67 3.35z" fill="#FFF" />
<path d="M37.08 134.21s3.83 26.71 24.8 34.4l-.26-5.07s-17.81-3.04-24.54-29.33z" fill="#1A1A1A" />
<path d="M46.4 84.67s1 4.66 1.49 8.8l.17.39s2.83.43 3.18 1.61c.35 1.18-1.86 3.4-1.86 3.4s1 4.54-1.41 6.36c-2.41 1.82-3.94 1.72-3.94 1.72s-1.62-6.38-8.39-7.06c0 0-4.16 1.25-5.24-2.32a3.5 3.5 0 013.31-4.78c.89.108 1.766.316 2.61.62a57 57 0 006.22-4.49c1.69-1.63 3.86-4.25 3.86-4.25z" fill="#FFF" />
<path d="M192.34 171.78l-1.76-3s-2.66 2.67-1.95 3.85c.71 1.18 3.71-.85 3.71-.85zM202.17 162.68l-2.13-2.79s2-1.18 3.1-.21-.97 3-.97 3zM184.52 116.33l.27 6.72-2.63.33s-2.74-4.11 2.12-7l.24-.05zM198.35 115.28s6.22.39 6.26 3.54c.04 3.15-4 4.78-4 4.78h-1.73l-.53-8.32z" fill="#1A1A1A" />
<path d="M49.75 84.28a2.4 2.4 0 01-3.1.56l.3 1.79.61 2.54a18.7 18.7 0 002.08-4.5c.04-.17.08-.26.11-.39zM43.05 104.71a10.18 10.18 0 011 2.24s1.5.11 3.94-1.72c.36-.269.66-.61.88-1a5 5 0 01-5.82.48z" fill="#EEE" />
<path d="M178.1 39.98a5.82 5.82 0 11-11.64 0 5.82 5.82 0 0111.64 0z" fill="#FEFEFE" />
<circle fill="#FFCE26" cx="108.43" cy="37.6" r="2.38" />
<path d="M195.39 95.62c-1.42.54-10.69-.48-14.47-1.91-3.17-1.2-2.58-5.05-2.31-6.26a6.63 6.63 0 00-1.74 2c-2.74 4.88 1.83 9 3.34 9.52l.09-3.7a18.63 18.63 0 008.31 1.3c3.74-.36 6.14-.82 6.79-.95.08-.02.08-.04-.01 0zM195.88 95.5l-.46.68c-.27 1.31-.81 4.68.37 6.61a4.87 4.87 0 011.23-1.13c-1.14-.73-1.14-6.16-1.14-6.16z"fill="#FFF" />
<path d="M188.32 117.18c-3.68 0-7.38-1.41-8.09-4.82a28.67 28.67 0 01-.24-3.84v-1.13c0-1.45.19-11.36.2-11.78a.33.33 0 01.35-.34.34.34 0 01.33.35c0 .11-.23 10.32-.19 11.75v1.14a30.37 30.37 0 00.22 3.71c.73 3.54 5.23 4.64 9.09 4.17a14.86 14.86 0 003.19-.68.35.35 0 01.44.21.35.35 0 01-.21.44 15.7 15.7 0 01-3.33.71 14.72 14.72 0 01-1.76.11zM198.82 123.95a.35.35 0 01-.35-.33l-.75-14.82a.35.35 0 01.32-.37.38.38 0 01.37.33l.75 14.82a.35.35 0 01-.33.37h-.01z"fill="#000" />
<path d="M199.79 109.5c-.99 0-1.95-.33-2.73-.94a.342.342 0 11.42-.54 3.79 3.79 0 10-1.25-4.37.34.34 0 01-.44.2.35.35 0 01-.2-.45 4.49 4.49 0 117.05 5.07 4.5 4.5 0 01-2.85 1.03zM180.56 99.87a.32.32 0 01-.14 0 .35.35 0 01-.17-.46s.84-1.73 3.28-1.1a.35.35 0 01-.18.67c-1.88-.5-2.47.71-2.48.72a.33.33 0 01-.31.17zM192.41 100.06a.34.34 0 01-.27-.13c-1.61-2.06-3.19-1.08-3.26-1a.34.34 0 01-.47-.1.34.34 0 01.1-.48s2.18-1.35 4.17 1.2a.34.34 0 01-.06.48.31.31 0 01-.21.03zM188.58 113.28a3.63 3.63 0 01-1.12-.17 2.49 2.49 0 01-1.69-1.31 1.33 1.33 0 01.18-1.34 1.93 1.93 0 011.77-.61c.93.11 1 .05 1.2-.09.2-.14.27-.2.43-1.11a1.92 1.92 0 011.11-1.51 1.31 1.31 0 011.33.22 2.4 2.4 0 01.69 1.93 3.89 3.89 0 01-3.9 4v-.01zm-1.16-2.78a1.15 1.15 0 00-.93.37.66.66 0 00-.08.67c.275.46.727.785 1.25.9a3.23 3.23 0 002.86-.52 3.31 3.31 0 001.28-2.66 1.79 1.79 0 00-.43-1.37.62.62 0 00-.66-.13 1.24 1.24 0 00-.68 1c-.19 1.08-.35 1.28-.71 1.55s-.59.35-1.68.21l-.22-.02z"fill="#000" />
<path d="M190.32 112.83a.35.35 0 01-.3-.18c-1.29-2.3.58-4.16 1.74-4.82a.34.34 0 01.47.13.34.34 0 01-.13.47c-.11.06-2.75 1.6-1.48 3.88a.35.35 0 01-.13.47.34.34 0 01-.17.05zM201.11 107.5a.29.29 0 01-.16 0l-3.22-1.59a.35.35 0 01-.19-.25.34.34 0 01.1-.3l2.93-3a.34.34 0 01.48.48l-2.6 2.66 2.8 1.39a.34.34 0 01.15.46.34.34 0 01-.29.15zM190.55 101.44c-.27 0-.46.08-.51 1.07-.05.99.22 1.29.47 1.28.25-.01.49-.36.46-1.15-.03-.79-.09-1.14-.42-1.2zM182.57 101.36c-.27 0-.45.07-.55 1.06-.1.99.18 1.3.43 1.29.25-.01.5-.34.5-1.13 0-.79-.02-1.15-.38-1.22zM202.38 102.11a.41.41 0 01-.18-.05.34.34 0 01-.1-.48c1.73-2.69 4.24-7.73 1.53-11.22a5.76 5.76 0 00-2.46-1.83 6.91 6.91 0 00-1.49-.37h-.23c-.83-.08-.93-.09-1-.29a.35.35 0 01.15-.47.39.39 0 01.3 0c.12 0 .43 0 .65.08h.28a8.37 8.37 0 011.62.41 6.49 6.49 0 012.76 2.05c3 3.82.33 9.17-1.51 12a.32.32 0 01-.32.17zM196.1 90.09a.34.34 0 01-.17-.64c.31-.19 1.53-1.11 2-1.45a.34.34 0 01.48.06.35.35 0 01-.06.48c-.07.05-1.64 1.25-2.05 1.5a.41.41 0 01-.2.05zM183.66 155.23a.4.4 0 01-.22-.08.36.36 0 010-.49l5.93-7-2.39-2-6.52 7.75a.35.35 0 11-.53-.45l6.75-8a.33.33 0 01.48 0l2.92 2.45a.36.36 0 010 .49l-6.15 7.31a.36.36 0 01-.27.02z"fill="#000" />
<path d="M189.82 147.92a.34.34 0 01-.23-.08.35.35 0 010-.48l1-1.16-2.39-2-1 1.16a.34.34 0 01-.52-.44l1.2-1.42a.35.35 0 01.49 0l2.92 2.45a.42.42 0 01.12.24.38.38 0 01-.08.25l-1.2 1.42a.35.35 0 01-.31.06zM182.64 160.72a.35.35 0 01-.08-.68 31.68 31.68 0 003.1-1 .35.35 0 01.44.2.34.34 0 01-.21.44 30.5 30.5 0 01-3.16 1l-.09.04zM180.98 155.87a.35.35 0 01-.34-.29.35.35 0 01.29-.39 15 15 0 005.37-1.61.35.35 0 01.48.09.36.36 0 01-.09.48 15.67 15.67 0 01-5.65 1.72h-.06zM183.88 164.35a.33.33 0 01-.34-.31.34.34 0 01.3-.37 26 26 0 003.18-.5.34.34 0 11.17.66 24.79 24.79 0 01-3.28.52h-.03zM179.38 151.2a.34.34 0 01-.18-.64 9.48 9.48 0 013.82-1.21.34.34 0 01.37.32.35.35 0 01-.32.37 8.79 8.79 0 00-3.51 1.11.41.41 0 01-.18.05zM202.28 163.02a.34.34 0 01-.27-.13c-.06-.08-6.4-8.23-8-9.58a13.68 13.68 0 00-6.48-2.74.342.342 0 11.07-.68 13.94 13.94 0 016.85 2.9c1.64 1.39 7.82 9.34 8.08 9.68a.34.34 0 01-.25.55zM192.74 172.13a.34.34 0 01-.29-.17c-1.54-2.57-3.24-4.76-3.71-4.78a4.83 4.83 0 00-.6.09 13.73 13.73 0 01-3.17.28.34.34 0 01-.33-.35.35.35 0 01.36-.33 12.76 12.76 0 003-.27 4 4 0 01.73-.11c1.11 0 3.37 3.58 4.3 5.12a.34.34 0 01-.12.47.37.37 0 01-.17.05zM223.49 176.44a.34.34 0 01-.29-.17c-3.9-6.83-15.43-14-20.09-16.24a.344.344 0 01.3-.62c4.91 2.35 16.37 9.49 20.38 16.52a.34.34 0 01-.12.47.391.391 0 01-.18.04zM207.81 189.82a.35.35 0 01-.19-.06 104.58 104.58 0 01-19.13-16.66.34.34 0 11.51-.45 104.56 104.56 0 0019 16.54.34.34 0 01.1.48.35.35 0 01-.29.15zM233.18 189.82a.41.41 0 01-.18 0 .34.34 0 01-.12-.47 22.46 22.46 0 003-10.35c.55-11.95-3.93-23.09-9-34.4a79.3 79.3 0 01-1-2.35c-2.16-5-4.85-11.31-9.28-14.2-3.05-2-6.81-2.63-10.44-3.26l-.81-.14a.34.34 0 01-.28-.4.36.36 0 01.4-.28l.81.14c3.7.64 7.53 1.3 10.69 3.36 4.61 3 7.34 9.38 9.54 14.5.35.82.69 1.61 1 2.35 5.08 11.39 9.59 22.62 9 34.71a23.32 23.32 0 01-3.05 10.62.34.34 0 01-.28.17zM200.72 124.06c-.75-.06-1.3-.09-1.92-.11a.36.36 0 01-.34-.36.35.35 0 01.36-.33c.63 0 1.19.05 1.93.11a.35.35 0 010 .69h-.03z"fill="#000" />
<path d="M189.82 181.64h-33.68a.35.35 0 01-.35-.34.35.35 0 01.35-.35h33.2l-15.3-44.61h-32.52a.35.35 0 01-.34-.35.34.34 0 01.34-.34h32.76a.35.35 0 01.33.23l15.53 45.3c.05.1.05.22 0 .32a.35.35 0 01-.32.14zM189.42 173.5a1.17 1.17 0 01-.93-.36c-.71-.78-.12-2.36 1.75-4.69a.342.342 0 11.54.42c-1.81 2.27-2.09 3.47-1.78 3.81.31.34 1.11.2 2.85-.74a30 30 0 005.53-4.08c4.34-3.93 6.2-7.23 5.62-7.87-.32-.36-1.14-.17-2.5.56a.35.35 0 01-.47-.14.34.34 0 01.14-.46c1.24-.67 2.6-1.24 3.34-.42 1.21 1.34-1.93 5.46-5.67 8.84a30.34 30.34 0 01-5.67 4.18 6.46 6.46 0 01-2.75.95zM10.55 170.55a9.92 9.92 0 01-7.65-3.6c-6.25-7.06 4.15-30.27 13.14-43.74a.35.35 0 01.58.39c-10.64 15.9-18.48 36.9-13.2 42.9 5.69 6.43 13 1.84 13.26 1.64a.343.343 0 01.38.57 13.23 13.23 0 01-6.51 1.84zM43.17 90.39a.34.34 0 01-.24-.58 3.06 3.06 0 013.65-.63.34.34 0 01.14.46.34.34 0 01-.46.15 2.39 2.39 0 00-2.83.49.36.36 0 01-.26.11zM44.94 91.61c.28-.05.46.07.54 1.06.08.99-.19 1.29-.44 1.29s-.49-.35-.49-1.14c0-.79.03-1.16.39-1.21zM34.62 100.91a4.1 4.1 0 01-4-3.47 4.09 4.09 0 017.15-3.28.344.344 0 01-.52.45 3.41 3.41 0 00-5.33.2 3.4 3.4 0 00.73 4.75 3.42 3.42 0 004.36-.27.34.34 0 11.47.49 4 4 0 01-2.2 1.08 4.44 4.44 0 01-.66.05z"fill="#000" />
<path d="M33.95 98.98a.33.33 0 01-.25-.12.34.34 0 010-.48l1.94-1.74-2.42-1.28a.35.35 0 01-.14-.47.35.35 0 01.47-.14l2.84 1.52c.1.05.168.148.18.26a.35.35 0 01-.11.3l-2.3 2.06a.32.32 0 01-.21.09zM44.24 107.3a.35.35 0 01-.34-.28.34.34 0 01.28-.4 6.07 6.07 0 004.33-2.59 7 7 0 00.54-5.06.35.35 0 01.08-.34c.77-.79 1.94-2.33 1.77-3.09-.17-.76-1.85-1.19-3-1.36a.34.34 0 01-.29-.31c0-.07-.8-7.45-1.34-8.9a.35.35 0 01.472-.432.34.34 0 01.178.192c.51 1.39 1.19 7.45 1.34 8.81.88.16 3.09.67 3.34 1.85.25 1.18-1.31 3-1.82 3.58a7.43 7.43 0 01-.66 5.41 6.68 6.68 0 01-4.8 2.91l-.08.01zM82.25 111.71a.35.35 0 01-.31-.2 21.79 21.79 0 01-1-3.21c-.21-.77-.4-1.5-.57-2a6.74 6.74 0 01-.58-3.94 2.13 2.13 0 011.09-1.36 2.24 2.24 0 012.17.2 4.19 4.19 0 011.37 1.58c.155.348.275.71.36 1.08.23.88.52 2 1.32 2.18 1.3.3 2.3-.923 3-3.67.35-1.35.66-2.47 1-3.5a44.5 44.5 0 012.57-6.8l.11-.22a3.78 3.78 0 011.11-1.55 2.08 2.08 0 011.35-.37 2.14 2.14 0 011.67.89c.54.828.692 1.85.42 2.8-.36 1.44-1.86 5.64-2.4 7.14a3.15 3.15 0 011.95.47 2.8 2.8 0 011.14 1.86 3.44 3.44 0 012 1.11c.639.837.9 1.902.72 2.94a.35.35 0 01-.38.3.33.33 0 01-.3-.38 3.09 3.09 0 00-.57-2.41 2.81 2.81 0 00-1.77-.91.35.35 0 01-.32-.3 2.27 2.27 0 00-.88-1.64 2.84 2.84 0 00-2-.29.34.34 0 01-.33-.1.32.32 0 01-.07-.35c0-.06 2.15-5.92 2.58-7.6a2.84 2.84 0 00-.31-2.24 1.54 1.54 0 00-1.17-.61 1.44 1.44 0 00-.9.24 3.35 3.35 0 00-.89 1.3l-.11.22a43.86 43.86 0 00-2.53 6.69c-.31 1-.62 2.14-1 3.48-.83 3.18-2.13 4.59-3.85 4.17-1.2-.29-1.56-1.67-1.83-2.68a4.71 4.71 0 00-.3-.92 3.49 3.49 0 00-1.13-1.33 1.58 1.58 0 00-1.5-.17 1.5 1.5 0 00-.73.94 6.21 6.21 0 00.55 3.48c.19.55.39 1.3.6 2.09a22.48 22.48 0 001 3.08.34.34 0 01-.16.46.28.28 0 01-.19.05z"fill="#000" />
<path d="M95.95 108.27a.31.31 0 01-.19-.06.34.34 0 01-.1-.48 8.74 8.74 0 001.69-4.43c0-.19.15-.345.34-.35a.37.37 0 01.35.34 9.26 9.26 0 01-1.81 4.82.33.33 0 01-.28.16zM92.88 105.58h-.14a.34.34 0 01-.17-.45 21.13 21.13 0 001.52-4 .35.35 0 01.39-.29.34.34 0 01.29.39 19.69 19.69 0 01-1.57 4.14.37.37 0 01-.32.21zM98.25 114.4a.33.33 0 01-.19-.06.34.34 0 01-.1-.47 15.05 15.05 0 002.1-7.31.35.35 0 01.69 0 15.51 15.51 0 01-2.21 7.68.36.36 0 01-.29.16zM65.05 189.82a.33.33 0 01-.32-.23c-1.63-4.85-3.05-19.35-3.46-26a.35.35 0 01.33-.37.35.35 0 01.36.33c.4 6.65 1.82 21.07 3.42 25.85a.34.34 0 01-.22.43l-.11-.01zM16.33 189.38a.35.35 0 01-.34-.38 174 174 0 00.31-25c-.39-5.9-.3-12.86-.22-18.45 0-2.13.05-4.1.05-5.81a58.81 58.81 0 011.93-16.11.34.34 0 01.43-.24.33.33 0 01.23.42 58.4 58.4 0 00-1.9 15.93c0 1.71 0 3.69-.06 5.82-.07 5.58-.16 12.52.23 18.4a174.72 174.72 0 01-.32 25.14.35.35 0 01-.34.28zM65.39 140.5h-.11a5.51 5.51 0 01-1.74-1 12.62 12.62 0 01-3.19-5c-.37-.9-.74-1.82-1.11-2.73a82.83 82.83 0 00-3.9-8.72c-2.7-4.95-6.3-7.92-11-9.06a.35.35 0 01-.25-.42.34.34 0 01.41-.25c4.84 1.18 8.69 4.34 11.45 9.4a81.11 81.11 0 013.93 8.78c.37.92.73 1.83 1.11 2.73a12.06 12.06 0 003 4.78 5 5 0 001.52.86.35.35 0 01.22.44.35.35 0 01-.34.19z" fill="#000" />
<path d="M72.47 134.43h-.1a.34.34 0 01-.22-.43l6.91-21.12a.41.41 0 01.07-.11c.1-.13 2.65-3 10.29-2.32 8.49.76 10.92 5.64 11 5.85a.34.34 0 010 .2v.21c-.91 5.37-1.69 10-2.82 14.89a.34.34 0 01-.41.26.34.34 0 01-.26-.41c1.12-4.87 1.9-9.5 2.81-14.85v-.09c-.38-.66-3-4.71-10.41-5.38-6.71-.6-9.32 1.69-9.67 2l-6.89 21a.34.34 0 01-.3.3zM68.88 164.72a29.23 29.23 0 01-13-2.94 29.53 29.53 0 01-7.83-5.79 38.67 38.67 0 01-5.46-7.17 49.51 49.51 0 01-3.45-7 50.1 50.1 0 01-1.82-5.33c-.16-.58-.37-1.35-.52-2.13a.34.34 0 01.26-.4.34.34 0 01.41.27c.15.75.36 1.5.52 2.07a50.13 50.13 0 001.78 5.26 49.34 49.34 0 003.41 6.91 38.47 38.47 0 005.36 7 27.54 27.54 0 0021.31 8.51 22.72 22.72 0 002.27-.17.343.343 0 11.09.68 19.53 19.53 0 01-2.34.17l-.99.06zM182.51 123.72a.35.35 0 01-.34-.31.36.36 0 01.31-.38l2.49-.21a.33.33 0 01.37.32.34.34 0 01-.31.37l-2.49.21h-.03zM158 136.34a.34.34 0 01-.28-.54c4.48-6.78 11-10.68 20.35-12.26a.34.34 0 01.12.67c-9.2 1.56-15.53 5.36-19.9 12a.35.35 0 01-.29.13zM106.64 166.73a4.77 4.77 0 01-2.11-.55 9.05 9.05 0 01-4.6-8 3.56 3.56 0 015.52-3.19 8.54 8.54 0 013.39 3.36c1.82 3.14 1.56 6.69-.56 7.92a3.29 3.29 0 01-1.64.46zm-3.3-11.57a2.63 2.63 0 00-1.3.34 3.26 3.26 0 00-1.43 2.75 7.82 7.82 0 001.12 4.23 7.66 7.66 0 003.11 3.08 3.19 3.19 0 003.1.14c1.79-1 1.93-4.17.31-7a7.78 7.78 0 00-3.11-3.08 4 4 0 00-1.8-.46z" fill="#000" />
<path d="M145.88 148.89a.34.34 0 01-.32-.23l-3.61-10.9a8.3 8.3 0 00-7.88-5.69H77.54a8.31 8.31 0 00-1.79.19l-4.87 2.76a.34.34 0 11-.33-.59l4.93-2.79h.09a9.48 9.48 0 012-.22h56.51a9 9 0 018.53 6.16l3.61 10.9a.35.35 0 01-.22.44l-.12-.03zM147.49 189.82a.35.35 0 01-.35-.34.35.35 0 01.35-.35 8.31 8.31 0 007.88-10.91l-5.12-15.43a.343.343 0 11.65-.22l5.12 15.44a9 9 0 01-8.53 11.81z" fill="#000" />
<path d="M143.64 189.82H87.11a9 9 0 01-8.53-5.9L65.17 145.2a8.24 8.24 0 011.11-7.57 9.1 9.1 0 017.42-3.76h56.54a8.93 8.93 0 018.52 5.9l13.41 38.73a8.26 8.26 0 01-1.1 7.57 9.121 9.121 0 01-7.43 3.75zM73.7 134.56a8.4 8.4 0 00-6.86 3.47 7.56 7.56 0 00-1 6.94l13.41 38.73a8.26 8.26 0 007.88 5.43h56.53a8.43 8.43 0 006.87-3.47 7.56 7.56 0 001-6.94L138.11 140a8.24 8.24 0 00-7.87-5.44H73.7zM241.44 154.21a.34.34 0 01-.34-.3.33.33 0 01.3-.38s.58-.08 1.57-.29a.33.33 0 01.4.27.35.35 0 01-.26.41c-1 .21-1.61.28-1.63.29h-.04zm5.44-1.31a.34.34 0 01-.1-.67c1.23-.39 2.47-.86 3.68-1.37a.343.343 0 11.27.63c-1.23.53-2.49 1-3.74 1.4l-.11.01zm7.28-3.1a.35.35 0 01-.3-.18.35.35 0 01.14-.47 37.85 37.85 0 003.35-2 .35.35 0 01.47.09.34.34 0 01-.09.48 40.06 40.06 0 01-3.4 2.08.35.35 0 01-.18 0h.01zm6.53-4.46a.36.36 0 01-.27-.12.35.35 0 010-.48 34.63 34.63 0 002.84-2.7.35.35 0 01.49 0 .36.36 0 010 .49 35.89 35.89 0 01-2.89 2.75.32.32 0 01-.18.06h.01zm5.4-5.75a.38.38 0 01-.21-.09.35.35 0 01-.07-.48 36.83 36.83 0 002.15-3.27.34.34 0 01.59.34 34.88 34.88 0 01-2.19 3.34.35.35 0 01-.28.16h.01zm3.94-6.83a.31.31 0 01-.13 0 .33.33 0 01-.18-.45c.51-1.18 1-2.41 1.38-3.66a.34.34 0 01.43-.23.35.35 0 01.22.44 37.51 37.51 0 01-1.4 3.72.35.35 0 01-.33.18h.01zm2.41-7.51h-.07a.34.34 0 01-.27-.41c.27-1.24.49-2.54.66-3.86a.34.34 0 01.38-.3.36.36 0 01.3.39c-.17 1.34-.39 2.66-.67 3.92a.33.33 0 01-.34.26h.01zm1-7.83a.34.34 0 01-.34-.36c0-.89.06-1.82.06-2.74v-1.18c0-.19.15-.345.34-.35a.35.35 0 01.35.33v1.2c0 .94 0 1.87-.07 2.78a.34.34 0 01-.35.32h.01zm-.15-7.9a.35.35 0 01-.34-.32c-.1-1.27-.24-2.59-.42-3.91a.34.34 0 01.29-.39.35.35 0 01.39.3c.18 1.33.32 2.66.43 4a.35.35 0 01-.32.37l-.03-.05zm-1.06-7.84a.34.34 0 01-.34-.27c-.26-1.3-.56-2.58-.91-3.82a.34.34 0 01.24-.42.34.34 0 01.42.24c.36 1.25.67 2.55.93 3.86a.36.36 0 01-.27.41h-.07zm-2.14-7.59a.33.33 0 01-.32-.22c-.47-1.24-1-2.45-1.55-3.6a.34.34 0 01.15-.46.35.35 0 01.46.16c.57 1.17 1.1 2.4 1.58 3.66a.34.34 0 01-.2.44.25.25 0 01-.13.02h.01zm-3.48-7.07a.32.32 0 01-.29-.17 36 36 0 00-2.26-3.19.35.35 0 01.54-.43 36 36 0 012.28 3.27.34.34 0 01-.28.52h.01zm-4.91-6.18a.33.33 0 01-.24-.1 34.31 34.31 0 00-2.92-2.6.35.35 0 11.43-.54 34 34 0 013 2.65.34.34 0 010 .49.31.31 0 01-.28.1h.01zm-6.18-4.91a.41.41 0 01-.18-.05 38 38 0 00-3.43-1.9.344.344 0 01.3-.62 38 38 0 013.49 1.94.34.34 0 01-.19.63h.01zm-7.12-3.43a.2.2 0 01-.11 0c-1.22-.44-2.48-.83-3.75-1.16a.34.34 0 01-.25-.42.35.35 0 01.42-.25c1.29.34 2.57.74 3.81 1.19a.35.35 0 01.21.44.36.36 0 01-.33.2zm-7.66-2h-.05a29 29 0 00-3.91-.38.34.34 0 01-.34-.34c0-.19.15-.345.34-.35a29 29 0 014 .39.34.34 0 01.29.39.34.34 0 01-.33.29zM24.71 75.09a.35.35 0 01-.33-.24c-.42-1.25-.84-2.5-1.23-3.76a.342.342 0 01.65-.21c.4 1.26.81 2.51 1.23 3.75a.34.34 0 01-.21.44l-.11.02zm-2.36-7.59a.35.35 0 01-.33-.25c-.36-1.33-.68-2.63-.95-3.86a.34.34 0 01.26-.41.35.35 0 01.41.27c.27 1.21.58 2.5.95 3.82a.34.34 0 01-.24.42l-.1.01zm-1.67-7.73a.34.34 0 01-.34-.29c-.08-.56-.16-1.12-.23-1.68-.09-.76-.15-1.53-.2-2.28a.34.34 0 01.32-.36.35.35 0 01.37.32c0 .74.11 1.49.2 2.24.06.56.14 1.11.22 1.66a.34.34 0 01-.29.39h-.05zm-.46-7.88a.35.35 0 01-.34-.36c.06-1.34.194-2.675.4-4a.35.35 0 01.39-.29c.19.03.32.21.29.4a35.58 35.58 0 00-.39 3.89.34.34 0 01-.35.39v-.03zm1.24-7.8h-.09a.35.35 0 01-.24-.43 35 35 0 011.31-3.77.35.35 0 01.64.27 32.83 32.83 0 00-1.29 3.69.34.34 0 01-.33.27v-.03zm3-7.28a.35.35 0 01-.3-.52 31.94 31.94 0 012.2-3.33.343.343 0 01.55.41 29.24 29.24 0 00-2.15 3.27.35.35 0 01-.25.2l-.05-.03zm48.26-.79a.35.35 0 01-.33-.26.35.35 0 01.25-.42 3.52 3.52 0 002.37-2.51.34.34 0 01.43-.22.34.34 0 01.22.43 4.18 4.18 0 01-2.86 3l-.08-.02zm-3.47-1.37a.36.36 0 01-.27-.12 7.69 7.69 0 01-1.53-3.81.342.342 0 11.68-.08 7 7 0 001.38 3.45.35.35 0 01-.05.49.33.33 0 01-.16.1l-.05-.03zm-40-4.14a.31.31 0 01-.24-.1.34.34 0 010-.48 31.37 31.37 0 013-2.69.344.344 0 11.44.53 31.65 31.65 0 00-2.9 2.64.31.31 0 01-.29.09l-.01.01zm45.77-1.01a.34.34 0 01-.31-.19 9.26 9.26 0 00-2.43-2.9.34.34 0 010-.48.35.35 0 01.49 0 9.82 9.82 0 012.61 3.12.35.35 0 01-.16.46.37.37 0 01-.2-.01zm-7-2.35h-.05a.34.34 0 01-.29-.39 18.68 18.68 0 01.73-3 27.44 27.44 0 00-2.79-1.34.35.35 0 01-.19-.45.35.35 0 01.45-.19 30.38 30.38 0 012.76 1.32l.1-.27a.35.35 0 01.64-.01.33.33 0 010 .26l-.13.36.21.13a.343.343 0 01-.35.59l-.09-.06a17.08 17.08 0 00-.66 2.72.34.34 0 01-.38.3l.04.03zm84.69-1.07a.36.36 0 01-.3-.18c-.37-.67-.76-1.33-1.16-2a.36.36 0 01.11-.48.34.34 0 01.47.12c.41.65.81 1.33 1.18 2a.35.35 0 01-.3.52v.02zm-117.27-.47a.37.37 0 01-.3-.16.36.36 0 01.11-.48l1.23-.74a34.7 34.7 0 012.26-1.2.344.344 0 11.3.62c-.75.36-1.5.76-2.21 1.17-.41.24-.82.48-1.21.73a.32.32 0 01-.22.03l.04.03zm7.1-3.45a.34.34 0 11-.12-.67 37.37 37.37 0 013.84-1.12.35.35 0 01.41.26.34.34 0 01-.26.41 35.85 35.85 0 00-3.76 1.1l-.11.02zM62 21.22h-.08a30.66 30.66 0 00-3.84-.75.34.34 0 01-.29-.39.32.32 0 01.38-.29 29.86 29.86 0 013.92.77.35.35 0 01-.09.68v-.02zm87.31-.41a.33.33 0 01-.27-.14c-.78-1-1.61-2.08-2.47-3.06a.36.36 0 010-.49.35.35 0 01.49 0c.87 1 1.71 2 2.5 3.1a.35.35 0 01-.07.48.33.33 0 01-.22.08l.04.03zm-99.08-.42a.35.35 0 010-.69 34 34 0 013.65-.2h.23a.35.35 0 110 .69h-.23a34.9 34.9 0 00-3.68.2h.03zm20.61-.58a.27.27 0 01-.18-.05.34.34 0 01-.12-.47 28.49 28.49 0 012.34-3.27.34.34 0 01.48-.05.35.35 0 01.05.49 25.21 25.21 0 00-2.29 3.16.34.34 0 01-.32.16l.04.03zm73.27-5a.34.34 0 01-.24-.09c-.99-.9-1.99-1.78-2.99-2.62a.35.35 0 010-.48.34.34 0 01.48 0c1 .85 2 1.75 3 2.67a.34.34 0 010 .48.33.33 0 01-.29.05l.04-.01zM75.88 13.7a.32.32 0 01-.25-.1.35.35 0 010-.49c.94-.89 2-1.76 3-2.59a.342.342 0 11.42.54c-1.06.82-2.06 1.68-3 2.55a.33.33 0 01-.17.09zm62.15-3.92a.36.36 0 01-.2-.06c-1.07-.75-2.19-1.47-3.31-2.13a.34.34 0 01-.12-.47.35.35 0 01.47-.12c1.14.67 2.27 1.4 3.35 2.16a.34.34 0 01-.24.62h.05zm-55.91-.93a.34.34 0 01-.29-.15.35.35 0 01.1-.48c1.1-.7 2.26-1.38 3.44-2a.34.34 0 01.46.14.35.35 0 01-.14.47c-1.16.62-2.3 1.29-3.39 2a.29.29 0 01-.23.02h.05zm49.09-3.07a.28.28 0 01-.15 0 57.58 57.58 0 00-3.6-1.57.33.33 0 01-.2-.44.36.36 0 01.45-.2c1.23.48 2.46 1 3.65 1.59a.35.35 0 01.16.46.34.34 0 01-.36.16h.05zm-42.13-.67a.34.34 0 01-.2-.61c1.21-.54 2.45-1 3.7-1.49a.35.35 0 01.44.21.35.35 0 01-.21.44c-1.23.44-2.46.94-3.65 1.47a.32.32 0 01-.13-.02h.05zm34.77-2.2h-.1c-1.25-.37-2.53-.7-3.81-1a.35.35 0 01-.26-.41.34.34 0 01.41-.26c1.3.28 2.59.62 3.85 1a.32.32 0 01.23.42.34.34 0 01-.37.25h.05zm-27.33-.48a.35.35 0 01-.298-.52.34.34 0 01.208-.16c1.29-.36 2.6-.67 3.88-.92a.34.34 0 01.4.27.33.33 0 01-.27.4c-1.26.25-2.55.56-3.82.91l-.1.02zm19.6-1.21c-1.33-.19-2.65-.32-3.95-.41a.35.35 0 010-.69c1.33.09 2.66.23 4 .41a.34.34 0 01.29.39.34.34 0 01-.39.3h.05zm-11.83-.3a.33.33 0 01-.34-.31.34.34 0 01.3-.38c1.35-.14 2.69-.22 4-.23a.34.34 0 01.34.34.35.35 0 01-.34.35 37.74 37.74 0 00-3.92.23h-.04z" fill="#000" />
<path d="M264.09 189.82H1.38a.34.34 0 01-.34-.34c0-.19.15-.345.34-.35h262.71a.35.35 0 01.35.35.35.35 0 01-.35.34zM221.93 133.81a.34.34 0 01-.34-.34V79.2a.34.34 0 11.68 0v54.3a.34.34 0 01-.34.31zM150.38 42.91h-26a.35.35 0 01-.35-.35.35.35 0 01.35-.34h26a.34.34 0 01.34.34.35.35 0 01-.34.35zM54.88 58.5a.35.35 0 01-.35-.35v-7.34a8.61 8.61 0 018.6-8.59h28.19c.19 0 .345.15.35.34a.35.35 0 01-.35.35H63.13a7.91 7.91 0 00-7.91 7.9v7.33a.35.35 0 01-.34.36zM54.88 121.69a.35.35 0 01-.35-.34V77.03a.35.35 0 01.69 0v44.32a.34.34 0 01-.34.34zM222.88 73.7h-60.25a8.6 8.6 0 01-8.59-8.59V31.59a8.6 8.6 0 018.59-8.6h60.25a8.6 8.6 0 018.59 8.6v33.52a8.6 8.6 0 01-8.59 8.59zm-60.23-50a7.91 7.91 0 00-7.9 7.91v33.52a7.91 7.91 0 007.9 7.91h60.23a7.91 7.91 0 007.9-7.91V31.59a7.91 7.91 0 00-7.9-7.91l-60.23.02zM187.74 127.34a.25.25 0 01-.12 0c-.2-.07-5-1.86-6.21-4.68a5.3 5.3 0 01.13-4 4.75 4.75 0 012.71-2.66.35.35 0 01.24.65 4.06 4.06 0 00-2.32 2.28 4.68 4.68 0 00-.13 3.44c1 2.38 5.17 4.06 5.75 4.28 8.31-.6 15.93-3.77 16.33-6.8a2.78 2.78 0 00-.53-2.14c-.83-1.07-2.58-1.77-5.19-2.09a.34.34 0 01-.3-.38.34.34 0 01.38-.3c2.8.34 4.7 1.13 5.65 2.35a3.4 3.4 0 01.67 2.65c-.51 3.86-9.24 6.85-17 7.4h-.06z"fill="#000" />
<path d="M182.96 128.57a.4.4 0 01-.15 0c-2.63-1.27-4.31-3-5-5a8 8 0 01.73-6.2 7.1 7.1 0 013-3.12.33.33 0 01.46.13.34.34 0 01-.12.47 6.44 6.44 0 00-2.69 2.84 7.3 7.3 0 00-.69 5.66c.63 1.9 2.19 3.46 4.65 4.65a.34.34 0 01.16.46.34.34 0 01-.35.11zM208.98 125.32h-.1a.34.34 0 01-.25-.41c0-.07 1.51-6.54-3.54-10a11.15 11.15 0 00-6.85-1.88.34.34 0 110-.68 11.93 11.93 0 017.24 2c5.44 3.76 3.84 10.68 3.82 10.75a.34.34 0 01-.32.22z" fill="#000" />
<path d="M191 129.26a.34.34 0 110-.68c15-1.84 16.39-7.37 16.4-7.42a.35.35 0 01.41-.27.35.35 0 01.27.4c-.05.25-1.4 6.07-17 8l-.08-.03zM185 123.5a.35.35 0 01-.34-.33l-.25-6.84a.35.35 0 01.33-.36.34.34 0 01.35.33l.26 6.84a.36.36 0 01-.34.36H185zM109.71 96.3H96.49a.35.35 0 01-.34-.35.34.34 0 01.34-.34h13.22a3.39 3.39 0 003.39-3.39v-7.9a3.39 3.39 0 00-3.39-3.39H86.79a3.4 3.4 0 00-3.4 3.39v7.9a3.4 3.4 0 003.4 3.39h4.33a.34.34 0 01.34.34.35.35 0 01-.34.35h-4.33a4.08 4.08 0 01-4.08-4.08v-7.9a4.08 4.08 0 014.08-4.08h22.92a4.08 4.08 0 014.08 4.08v7.9a4.08 4.08 0 01-4.08 4.08zM149.67 115.42a.35.35 0 01-.34-.35.34.34 0 01.34-.34 3.39 3.39 0 003.39-3.39v-7.9a3.39 3.39 0 00-3.39-3.39h-22.92a3.39 3.39 0 00-3.39 3.39v7.9a3.39 3.39 0 003.39 3.39h8.51c.19 0 .345.15.35.34a.35.35 0 01-.35.35h-8.51a4.08 4.08 0 01-4.08-4.08v-7.9a4.08 4.08 0 014.08-4.08h22.92a4.08 4.08 0 014.08 4.08v7.9a4.08 4.08 0 01-4.08 4.08zM48.42 101.61a3.76 3.76 0 01-2.86-1.55.34.34 0 01.08-.48.35.35 0 01.48.08 2.83 2.83 0 003.23 1.07.35.35 0 01.45.18.34.34 0 01-.18.45 3 3 0 01-1.2.25zM212.47 165.64a.35.35 0 01-.34-.35c.08-9.55-5.55-19.38-5.61-19.48a.35.35 0 01.13-.47.34.34 0 01.47.13c.06.1 5.78 10.08 5.69 19.83a.34.34 0 01-.34.34zM36.82 94.13a.34.34 0 010-.68s2.11-.21 5.88-3.44a14.46 14.46 0 003.47-5.34c.2-.45.4-.89.61-1.31a.34.34 0 11.61.3c-.2.42-.39.85-.59 1.29a15.27 15.27 0 01-3.65 5.59c-4 3.42-6.19 3.59-6.29 3.59h-.04z" fill="#000" />
<path d="M19.94 98.56a.34.34 0 01-.34-.26c-.39-1.6-2.24-12.44-1-15.5 1.74-4.36 7.58-5.57 9.33-5.83a12.27 12.27 0 014.42.15 6.06 6.06 0 012.75 1.07c1.23-1.67 3.59-2.37 5.52-2.47a11.45 11.45 0 016.66 1.78 6.18 6.18 0 013.13 5.68 11.56 11.56 0 01-2.61 6.23.33.33 0 01-.48 0 .34.34 0 010-.48 10.94 10.94 0 002.41-5.81 5.41 5.41 0 00-2.81-5 10.8 10.8 0 00-6.27-1.67c-2 .1-4.39.85-5.32 2.69a.34.34 0 11-.64-.23.14.14 0 000-.13c-.12-.19-.59-.56-2.41-.93a11.72 11.72 0 00-4.23-.16c-1.66.25-7.19 1.38-8.79 5.4-1.09 2.74.54 13 1 15.09a.34.34 0 01-.25.41l-.07-.03z" fill="#000" />
<path d="M31.24 127.26a11 11 0 01-8.7-4.43 8.23 8.23 0 01-6 .85 7.18 7.18 0 01-4.78-3.79c-1.36-3 0-6.35 3.22-8 .24-.12 1.29-.73 1.93-1.09l-.91-.6a7.27 7.27 0 01-1.39-1.26 7.56 7.56 0 01-1.66-4.27 6.79 6.79 0 011.19-4.55 6 6 0 015.81-2.2.342.342 0 01-.08.68 5.38 5.38 0 00-5.18 1.93 6.08 6.08 0 00-1.05 4.08 6.75 6.75 0 001.5 3.88c.362.436.783.82 1.25 1.14l1.36.9c.1.062.16.172.16.29a.34.34 0 01-.17.29c-.09.05-2.09 1.21-2.44 1.39-2.93 1.54-4.13 4.48-2.92 7.14a6.48 6.48 0 004.32 3.41 7.49 7.49 0 005.7-.92.36.36 0 01.46.08c2.75 3.58 6.53 5.06 10.63 4.15a6.86 6.86 0 004.21-2.55 3.86 3.86 0 00.64-2 12.56 12.56 0 00-.46-2.41.35.35 0 01.04-.64 9.47 9.47 0 005.19-4.21c1.27-2.26 1.31-4.82.15-7.84-1-2.63-3.66-5.63-6.73-6.27a.34.34 0 01-.26-.4.33.33 0 01.4-.27c3.31.68 6.14 3.88 7.23 6.69 1.24 3.23 1.18 6-.19 8.43a10.13 10.13 0 01-5.16 4.37c.244.839.405 1.7.48 2.57a4.54 4.54 0 01-.76 2.39 7.3 7.3 0 01-4.63 2.84 11.31 11.31 0 01-2.4.2zM180.3 99.35a.37.37 0 01-.17 0c-.06 0-6.51-3.76-3.62-9.71a6.89 6.89 0 014.84-3.88 11.18 11.18 0 018.8 2.29.36.36 0 010 .49.34.34 0 01-.48 0 10.44 10.44 0 00-8.22-2.15 6.12 6.12 0 00-4.36 3.52c-2.61 5.37 3.1 8.67 3.34 8.8a.35.35 0 01-.17.65l.04-.01z" fill="#000" />
<path d="M198.73 88.03a.33.33 0 01-.25-.11c-2.28-2.44-4.64-3.68-7-3.7h-.06a7.78 7.78 0 00-5.13 2.08.35.35 0 11-.5-.48 8.43 8.43 0 015.63-2.29h.07c2.58 0 5.11 1.34 7.52 3.92a.34.34 0 010 .48.3.3 0 01-.28.1zM184.42 108.98a2.26 2.26 0 01-1.79-.57 1 1 0 010-1.18c.89-1.71 2.24-7.53 2.26-7.59a.344.344 0 11.67.16c-.06.24-1.4 6-2.32 7.75-.08.15-.16.35-.08.46.26.35 1.63.32 2.53.16a.35.35 0 01.39.28.34.34 0 01-.28.4 7.87 7.87 0 01-1.38.13zM196.1 103.5a.35.35 0 01-.3-.18c-1.34-2.57-.86-5.91-.59-7.23-9.83 2.44-16.36-.85-16.76-1.29a.36.36 0 010-.49.36.36 0 01.46 0c.19.12 6.61 3.65 16.65 1a.37.37 0 01.33.09.35.35 0 01.08.34s-1.15 4.31.41 7.29a.34.34 0 01-.15.46.29.29 0 01-.13.01zM170.19 44.55a6.17 6.17 0 116.17-6.16 6.18 6.18 0 01-6.17 6.16zm0-11.64a5.48 5.48 0 105.48 5.48 5.49 5.49 0 00-5.48-5.48zM221.32 36.5h-37a.34.34 0 01-.34-.34c0-.19.15-.345.34-.35h37c.19.005.34.16.34.35a.34.34 0 01-.34.34zM221.32 51.81h-30.77a.34.34 0 01-.34-.34c0-.19.15-.345.34-.35h30.77c.19.005.34.16.34.35a.34.34 0 01-.34.34zM180.56 51.81h-16.18a.35.35 0 01-.35-.34.35.35 0 01.35-.35h16.18a.35.35 0 01.32.38.35.35 0 01-.32.31zM123.01 67.27H93.63a.35.35 0 01-.35-.35V32.57a.35.35 0 01.35-.35h29.38a.35.35 0 01.35.35v34.35a.35.35 0 01-.35.35zm-29-.69h28.7V32.91h-28.7v33.67z" fill="#000" />
<path d="M115.97 46.14h-15.09a.34.34 0 110-.68h15.08a.34.34 0 110 .68h.01zM115.97 51.5h-15.09a.34.34 0 110-.68h15.08a.34.34 0 110 .68h.01zM115.97 56.76h-15.09a.35.35 0 01-.35-.34.35.35 0 01.35-.35h15.08a.35.35 0 01.35.35.35.35 0 01-.34.34zM158 104.06a.35.35 0 01-.34-.35v-15.1h-36.6a.34.34 0 110-.68H158c.19 0 .345.15.35.34v15.44a.35.35 0 01-.35.35zM108.43 40.33a2.73 2.73 0 11-.02-5.46 2.73 2.73 0 01.02 5.46zm0-4.77a2 2 0 100 4 2 2 0 000-4zM117.25 90.99a2.73 2.73 0 112.73-2.72 2.72 2.72 0 01-2.73 2.72zm0-4.76a2 2 0 100 4 2 2 0 000-4zM158 110.27a2.73 2.73 0 112.73-2.73 2.72 2.72 0 01-2.73 2.73zm0-4.76a2 2 0 102 2 2 2 0 00-2-2.01v.01z" fill="#000" />
</g>
</svg>
<!-- END HERO SVG IMAGE -->
</div>
</div>
<!-- CURVED SVG BORDER -->
<svg class="absolute bottom-0 w-full text-yellow-400 fill-current" viewBox="0 0 1400 50" xmlns="http://www.w3.org/2000/svg"><path d="M0 0c309.151 33.333 542.484 50 700 50 157.516 0 390.849-16.667 700-50v50H0V0z"/></svg>
</div>
<!-- HERO SECTION END -->
<!-- Second Section -->
<div class="relative w-full px-8 py-20 bg-yellow-400 sm:py-32 md:py-40">
<div class="container flex flex-col items-center justify-center h-full max-w-6xl mx-auto sm:flex-row sm:justify-between">
<div class="relative flex flex-col items-start justify-center w-full mb-10 sm:w-5/6 sm:w-1/3 sm:mb-0 sm:pr-10">
<h2 class="mb-5 text-2xl font-black leading-tight xl:text-4xl">Easily Add Your Own Screenshots</h2>
<p class="mb-8 text-base text-yellow-900 xl:text-xl md:max-w-lg">You can easily customize this design by replacing your image with the image on the right. Cool, right?</p>
<a href="#_" class="relative">
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-black rounded"></span>
<span class="relative inline-block w-full h-full px-5 py-3 text-lg font-bold transition duration-100 bg-white border-2 border-black rounded fold-bold hover:bg-yellow-500 hover:text-white">GET STARTED</span>
</a>
</div>
<div class="relative flex flex-col items-center justify-center w-full -mr-0 sm:w-5/6 sm:w-2/3 sm:-mr-20">
<div class="overflow-hidden border-2 border-black rounded-lg">
<img src="https://cdn.devdojo.com/images/october2020/screenshot.png" alt="Screen shot of Flare" class="object-cover w-full h-full">
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div class="relative w-full py-20 pb-20 overflow-hidden bg-white md:pt-40 md:pb-64">
<!-- CURVED SVG BORDER INVERT -->
<svg class="absolute top-0 w-full text-yellow-400 fill-current" viewBox="0 0 1400 50" xmlns="http://www.w3.org/2000/svg"><path d="M0 50C309.151 16.667 542.484 0 700 0c157.516 0 390.849 16.667 700 50V0H0v50z"/></svg>
<div class="container relative flex flex-col justify-between h-full max-w-6xl px-8 mx-auto xl:px-0">
<h2 class="relative flex items-center self-start inline-block w-auto mb-20 text-4xl font-black">
<span class="absolute inline-block w-full h-4 mt-3 -ml-2 bg-yellow-400"></span>
<span class="relative">Feature List</span>
</h2>
<div class="flex w-full h-full">
<div class="w-full lg:w-2/3">
<!-- Feature blocks first column -->
<div class="flex flex-col w-full mb-10 sm:flex-row">
<div class="w-full mb-10 sm:mb-0 sm:w-1/2">
<div class="relative ml-0 mr-0 sm:mr-10">
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-indigo-500 rounded-lg"></span>
<div class="relative p-5 bg-white border-2 border-indigo-500 rounded-lg">
<div class="flex items-center -mt-1">
<svg class="w-8 h-8 text-indigo-500 fill-current" viewBox="0 0 20 20">
<polygon points="18.198,7.95 3.168,7.95 3.168,8.634 9.317,9.727 9.317,19.564 12.05,19.564 12.05,9.727 18.198,8.634 "></polygon>
<path d="M2.485,10.057v-3.41H2.473l0.012-4.845h1.366c0.378,0,0.683-0.306,0.683-0.683c0-0.378-0.306-0.683-0.683-0.683H1.119c-0.378,0-0.683,0.306-0.683,0.683c0,0.378,0.306,0.683,0.683,0.683h0.683v4.845C1.406,6.788,1.119,7.163,1.119,7.609v2.733c0,0.566,0.459,1.025,1.025,1.025c0.053,0,0.105-0.008,0.157-0.016l-0.499,5.481l5.9,2.733h0.931C8.634,13.266,5.234,10.458,2.485,10.057z"></path>
<path d="M18.169,6.584c-0.303-3.896-3.202-6.149-7.486-6.149c-4.282,0-7.183,2.252-7.484,6.149H18.169z M15.463,3.187c0.024,0.351-0.103,0.709-0.394,0.977c-0.535,0.495-1.405,0.495-1.94,0c-0.29-0.268-0.418-0.626-0.394-0.977C13.513,3.827,14.683,3.827,15.463,3.187z"></path>
<path d="M18.887,10.056c-2.749,0.398-6.154,3.206-6.154,9.508h0.933l5.899-2.733L18.887,10.056z"></path>
</svg>
<h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Awesome Dashboard</h3>
</div>
<p class="mt-3 mb-1 text-xs font-medium text-indigo-500 uppercase">PREMIUM FEATURE</p>
<p class="mb-2 text-gray-600">You can get a quick snapshot of all your analytics on your beautiful dashboard.</p>
</div>
</div>
</div>
<div class="w-full sm:w-1/2">
<div class="relative ml-0 md:mr-10">
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-purple-500 rounded-lg"></span>
<div class="relative p-5 bg-white border-2 border-purple-500 rounded-lg">
<div class="flex items-center -mt-1">
<svg class="w-8 h-8 text-purple-500 fill-current" viewBox="0 0 20 20">
<path d="M19.629,9.655c-0.021-0.589-0.088-1.165-0.21-1.723h-3.907V7.244h1.378V6.555h-2.756V5.866h2.067V5.177h-0.689V4.488h-1.378V3.799h0.689V3.11h-1.378V2.421h0.689V1.731V1.294C12.88,0.697,11.482,0.353,10,0.353c-5.212,0-9.446,4.135-9.629,9.302H19.629z M6.555,2.421c1.522,0,2.756,1.234,2.756,2.756S8.077,7.933,6.555,7.933S3.799,6.699,3.799,5.177S5.033,2.421,6.555,2.421z"></path>
<path d="M12.067,18.958h-0.689v-0.689h2.067v-0.689h0.689V16.89h2.067v-0.689h0.689v-0.689h-1.378v-0.689h-2.067v-0.689h1.378v-0.689h2.756v-0.689h-1.378v-0.689h3.218c0.122-0.557,0.189-1.134,0.21-1.723H0.371c0.183,5.167,4.418,9.302,9.629,9.302c0.711,0,1.401-0.082,2.067-0.227V18.958z"></path>
</svg>
<h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Rad Tools</h3>
</div>
<p class="mt-3 mb-1 text-xs font-medium text-purple-500 uppercase">NEW FEATURE</p>
<p class="mb-2 text-gray-600">We've got some pretty rad tools to help you take on the world.</p>
</div>
</div>
</div>
</div>
<!-- Feature blocks second column -->
<div class="flex flex-col w-full mb-5 sm:flex-row">
<div class="w-full mb-10 sm:mb-0 sm:w-1/2">
<div class="relative ml-0 mr-0 sm:mr-10">
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-blue-400 rounded-lg"></span>
<div class="relative p-5 bg-white border-2 border-blue-400 rounded-lg">
<div class="flex items-center -mt-1">
<svg class="w-8 h-8 text-blue-400 fill-current" viewBox="0 0 20 20">
<path d="M18.21,16.157v-8.21c0-0.756-0.613-1.368-1.368-1.368h-1.368v1.368v1.368v6.841l-1.368,3.421h5.473L18.21,16.157z"></path>
<path d="M4.527,9.316V7.948V6.579H3.159c-0.756,0-1.368,0.613-1.368,1.368v8.21l-1.368,3.421h5.473l-1.368-3.421V9.316z"></path>
<path d="M14.766,5.895h0.023V5.21c0-2.644-2.145-4.788-4.789-4.788S5.211,2.566,5.211,5.21v0.685h0.023H14.766zM12.737,3.843c0.378,0,0.684,0.307,0.684,0.684s-0.306,0.684-0.684,0.684c-0.378,0-0.684-0.307-0.684-0.684S12.358,3.843,12.737,3.843z M10,1.448c0.755,0,1.368,0.613,1.368,1.368S10.755,4.185,10,4.185c-0.756,0-1.368-0.613-1.368-1.368S9.244,1.448,10,1.448z"></path>
<path d="M14.789,6.579H5.211v9.578l1.368,1.368h6.841l1.368-1.368V6.579z M12.052,12.052H7.948c-0.378,0-0.684-0.306-0.684-0.684c0-0.378,0.306-0.684,0.684-0.684h4.105c0.378,0,0.684,0.306,0.684,0.684C12.737,11.746,12.431,12.052,12.052,12.052z M12.052,9.316H7.948c-0.378,0-0.684-0.307-0.684-0.684s0.306-0.684,0.684-0.684h4.105c0.378,0,0.684,0.307,0.684,0.684S12.431,9.316,12.052,9.316z"></path>
</svg>
<h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Easy Collaboration</h3>
</div>
<p class="mt-3 mb-1 text-xs font-medium text-blue-400 uppercase">FREE FEATURE</p>
<p class="mb-2 text-gray-600">Collaborating with members of your team couldn't be easier.</p>
</div>
</div>
</div>
<div class="w-full sm:w-1/2">
<div class="relative ml-0 md:mr-10">
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-teal-500 rounded-lg"></span>
<div class="relative p-5 bg-white border-2 border-teal-500 rounded-lg">
<div class="flex items-center -mt-1">
<svg class="w-8 h-8 text-teal-500 fill-current" viewBox="0 0 20 20">
<path d="M16.853,8.355V5.888c0-3.015-2.467-5.482-5.482-5.482H8.629c-3.015,0-5.482,2.467-5.482,5.482v2.467l-2.741,7.127c0,1.371,4.295,4.112,9.594,4.112s9.594-2.741,9.594-4.112L16.853,8.355z M5.888,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C6.402,17.137,6.173,17.367,5.888,17.367z M5.203,10c0-0.377,0.19-0.928,0.423-1.225c0,0,0.651-0.831,1.976-0.831c0.672,0,1.141,0.309,1.141,0.309C9.057,8.46,9.315,8.938,9.315,9.315v1.028c0,0.188-0.308,0.343-0.685,0.343H5.888C5.511,10.685,5.203,10.377,5.203,10z M7.944,16.853H7.259v-1.371l0.685-0.685V16.853z M9.657,16.853H8.629v-2.741h1.028V16.853zM8.972,13.426v-1.028c0-0.568,0.46-1.028,1.028-1.028c0.568,0,1.028,0.46,1.028,1.028v1.028H8.972z M11.371,16.853h-1.028v-2.741h1.028V16.853z M12.741,16.853h-0.685v-2.056l0.685,0.685V16.853z M14.112,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C14.626,17.137,14.396,17.367,14.112,17.367z M14.112,10.685h-2.741c-0.377,0-0.685-0.154-0.685-0.343V9.315c0-0.377,0.258-0.855,0.572-1.062c0,0,0.469-0.309,1.141-0.309c1.325,0,1.976,0.831,1.976,0.831c0.232,0.297,0.423,0.848,0.423,1.225S14.489,10.685,14.112,10.685z M18.347,15.801c-0.041,0.016-0.083,0.023-0.124,0.023c-0.137,0-0.267-0.083-0.319-0.218l-2.492-6.401c-0.659-1.647-1.474-2.289-2.905-2.289c-0.95,0-1.746,0.589-1.754,0.595c-0.422,0.317-1.084,0.316-1.507,0C9.239,7.505,8.435,6.916,7.492,6.916c-1.431,0-2.246,0.642-2.906,2.292l-2.491,6.398c-0.069,0.176-0.268,0.264-0.443,0.195c-0.176-0.068-0.264-0.267-0.195-0.444l2.492-6.401c0.765-1.911,1.824-2.726,3.543-2.726c1.176,0,2.125,0.702,2.165,0.731c0.179,0.135,0.506,0.135,0.685,0c0.04-0.029,0.99-0.731,2.165-0.731c1.719,0,2.779,0.814,3.542,2.723l2.493,6.404C18.611,15.534,18.524,15.733,18.347,15.801z"></path>
</svg>
<h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Automated Workflow</h3>
</div>
<p class="mt-3 mb-1 text-xs font-medium text-teal-500 uppercase">PREMIUM FEATURE</p>
<p class="mb-2 text-gray-600">Our automation tools will help you build and grow your marketing empire.</p>
</div>
</div>
</div>
</div>
</div>
<div class="hidden w-1/3 lg:block">
<div class="absolute w-full w-screen max-w-4xl pl-12 -mt-20">
<div class="absolute top-0 left-0 w-full h-full mt-2 ml-10 bg-gray-900 rounded-lg"></div>
<div class="relative overflow-hidden border-2 border-black rounded-lg">
<img src="https://cdn.devdojo.com/images/october2020/screenshot2.png" alt="Screen shot of Flare's hero component" class="object-cover w-full h-full">
</div>
</div>
</div>
</div>
</div>
<!-- Blob SVG Border -->
<svg class="absolute bottom-0 w-full text-gray-200 fill-current" viewBox="0 0 1400 74" xmlns="http://www.w3.org/2000/svg"><path d="M0 24C87.243 11.422 173.12 5.133 257.633 5.133 468.305 5.133 578.027 74 700 74c136.015 0 290.882-96.208 481.234-68.867C1268.807 17.71 1341.73 24 1400 24v50H0V24z" /></svg>
</div>
<!-- End Features Section -->
<!-- Begin Pricing Section -->
<div class="relative w-full pt-24 pb-56 bg-gray-200">
<div class="container relative flex flex-col justify-between h-full max-w-6xl px-8 mx-auto">
<div class="flex flex-col justify-center w-full">
<h2 class="relative flex items-center self-center inline-block w-auto mb-5 text-4xl font-black">
<span class="absolute inline-block w-full h-4 mt-3 -ml-2 bg-yellow-400"></span>
<span class="relative">Pricing</span>
</h2>
<p class="self-center mb-12 font-medium text-gray-600">Simple, Transparent Pricing for Everyone</p>
<div class="flex flex-col md:flex-row">
<!-- FEATURE 1 -->
<div class="w-full md:w-1/3">
<div class="flex flex-col items-center px-2 py-12 bg-white border-2 border-black rounded-lg lg:px-5 xl:px-12 md:rounded-r-none md:rounded-l-lg">
<div class="font-light"><span class="font-bold text-yellow-500">Basic</span> Plan</div>
<h4 class="flex items-center my-2 text-5xl font-black"><span class="mr-1 text-2xl font-light text-gray-800">$</span>48</h4>
<span class="w-1/2 h-1 bg-yellow-400"></span>
<div class="flex flex-col justify-start w-full px-6 py-10">
<div class="flex items-start w-full">
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">Awesome</span> Feature Here</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">Another</span> Cool Feature</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">And</span> Another</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">Another Feature Here</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">And Another One</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">And One More</p>
</div>
</div>
<a href="#_" class="relative w-full text-center">
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-yellow-500 rounded"></span>
<span class="relative inline-block w-full h-full px-5 py-3 text-base font-bold bg-white border-2 border-black rounded fold-bold">Select This One</span>
</a>
</div>
</div>
<!-- End FEATURE 1 -->
<!-- FEATURE 2-->
<div class="w-full md:w-1/3">
<div class="flex flex-col items-center px-2 py-12 my-8 bg-white border-2 border-black rounded-lg md:border-l-0 md:border-r-0 md:my-0 md:rounded-none lg:px-5 xl:px-12">
<div class="font-light"><span class="font-bold text-green-400">Pro</span> Plan</div>
<h4 class="flex items-center my-2 text-5xl font-black"><span class="mr-1 text-2xl font-light text-gray-800">$</span>98</h4>
<span class="w-1/2 h-1 bg-green-400"></span>
<div class="flex flex-col justify-start w-full px-6 py-10">
<div class="flex items-start w-full">
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">Awesome</span> Feature Here</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">Another</span> Cool Feature</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">And</span> Another</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">Another Feature Here</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">And Another One</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">And One More</p>
</div>
</div>
<a href="#_" class="relative w-full text-center">
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-green-400 rounded"></span>
<span class="relative inline-block w-full h-full px-5 py-3 text-base font-bold bg-white border-2 border-black rounded fold-bold">Select This One</span>
</a>
</div>
</div>
<!-- END FEATURE 2 -->
<!-- FEATURE 3 -->
<div class="w-full md:w-1/3">
<div class="flex flex-col items-center px-2 py-12 ml-0 bg-white border-2 border-black rounded-lg lg:px-6 xl:px-12 md:rounded-l-none md:rounded-r-lg">
<div class="font-light"><span class="font-bold text-purple-500">Premium</span> Plan</div>
<h4 class="flex items-center my-2 text-5xl font-black"><span class="mr-1 text-2xl font-light text-gray-800">$</span>68</h4>
<span class="w-1/2 h-1 bg-purple-400"></span>
<div class="flex flex-col justify-start w-full px-6 py-10">
<div class="flex items-start w-full">
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">Awesome</span> Feature Here</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">Another</span> Cool Feature</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2"><span class="font-bold">And</span> Another</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">Another Feature Here</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">And Another One</p>
</div>
<div class="flex items-start w-full mt-3">
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
</svg>
</div>
<p class="ml-2">And One More</p>
</div>
</div>
<a href="#_" class="relative w-full text-center">
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-purple-500 rounded"></span>
<span class="relative inline-block w-full h-full px-5 py-3 text-base font-bold bg-white border-2 border-black rounded fold-bold">Select This One</span>
</a>
</div>
</div>
<!-- END FEATURE 3 -->
</div>
</div>
</div>
<!-- Blob SVG Border -->
<svg class="absolute bottom-0 w-full text-black fill-current" viewBox="0 0 1400 74" xmlns="http://www.w3.org/2000/svg"><path d="M0 24C87.243 11.422 173.12 5.133 257.633 5.133 468.305 5.133 578.027 74 700 74c136.015 0 290.882-96.208 481.234-68.867C1268.807 17.71 1341.73 24 1400 24v50H0V24z" /></svg>
</div>
<footer class="px-4 pt-12 pb-8 text-white bg-black">
<div class="container flex flex-col justify-between max-w-6xl px-4 mx-auto overflow-hidden lg:flex-row">
<a href="#_" class="block w-1/3 mr-4">
<span class="flex items-center">
<svg class="w-auto h-8 mt-1 text-white fill-current" viewBox="0 0 215 151" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="56.965%" y1="53.262%" x2="7.891%" y2="29.24%" id="b"><stop stop-color="#FFCD26" offset="0%"/><stop stop-color="#FFDF95" offset="100%"/></linearGradient><path d="M95.655.001c-24.386 0-43.538 13.864-52.36 34.66-5.144 12.126-3.711 24.522.084 29.027 2.435-5.804 11.57-15.424 29.476-15.424h79.952c29.783 0 54.375-30.377 61.963-48.263H95.655zM67.693 65.916C23.419 65.916.085 105.344 0 137.666v.345c.011 4.322.439 8.517 1.291 12.466 2.433-5.804 19.956-36.297 47.062-36.297h23.225c29.783 0 54.375-30.378 61.963-48.264H67.693z" id="a"/></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="#fff"><use xlink:href="#a"/></mask><path d="M95.655.001c-24.386 0-43.538 13.864-52.36 34.66-5.144 12.126-3.711 24.522.084 29.027 2.435-5.804 11.57-15.424 29.476-15.424h79.952c29.783 0 54.375-30.377 61.963-48.263H95.655zM67.693 65.916C23.419 65.916.085 105.344 0 137.666v.345c.011 4.322.439 8.517 1.291 12.466 2.433-5.804 19.956-36.297 47.062-36.297h23.225c29.783 0 54.375-30.378 61.963-48.264H67.693z" fill="url(#b)" mask="url(#c)"/></g></svg>
<span class="ml-2 text-lg font-black">Flare</span>
</span>
</a>
<div class="block w-2/3 mt-6 text-sm sm:flex lg:mt-0">
<ul class="flex flex-col w-full p-0 font-thin text-left text-gray-700 list-none">
<li class="inline-block px-3 py-2 font-medium tracking-wide text-white uppercase">Product</li>
<li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Features</a></li>
<li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Integrations</a></li>
<li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Pricing</a></li>
<li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">FAQ</a></li>
</ul>
<ul class="flex flex-col w-full p-0 font-thin text-left text-gray-700 list-none">
<li class="inline-block px-3 py-2 font-medium tracking-wide text-white uppercase">Company</li>
<li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Privacy</a></li>
<li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Terms of Service</a></li>
</ul>
<ul class="flex flex-col w-full p-0 font-thin text-left text-gray-700 list-none">
<li class="inline-block px-3 py-2 font-medium tracking-wide text-white uppercase">TailwindCSS</li>
<li><a href="https://devdojo.com/tailwindcss/templates" target="_blank" rel="noopener noreferrer" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Templates</a></li>
<li><a href="https://devdojo.com/tailwindcss/components" target="_blank" rel="noopener noreferrer" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Components</a></li>
<li><a href="https://devdojo.com/tails" target="_blank" rel="noopener noreferrer" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Tails</a></li>
</li>
</ul>
<div class="flex flex-col w-full text-gray-700">
<div class="inline-block px-3 py-2 font-medium tracking-wide text-white uppercase">Follow Us</div>
<div class="flex justify-start pl-4 mt-2">
<a class="flex items-center block mr-6 text-gray-300 no-underline hover:text-white" target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
<svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
<path d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z" /></svg>
</a>
<a class="flex items-center block mr-6 text-gray-300 no-underline hover:text-white" target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
<svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
<path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z" /></svg>
</a>
<a class="flex items-center block text-gray-300 no-underline hover:text-white" target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
<svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /></svg>
</a>
</div>
</div>
</div>
</div>
<div class="pt-4 pt-6 mt-10 text-center text-gray-600 border-t border-gray-800"> ©2020 Flare. All rights reserved.</div>
</footer>
<!-- a little JS for the mobile nav button -->
<script>
if( document.getElementById('nav-mobile-btn') ){
document.getElementById('nav-mobile-btn').addEventListener('click', function(){
if( this.classList.contains('close') ){
document.getElementById('nav').classList.add('hidden');
this.classList.remove('close');
} else {
document.getElementById('nav').classList.remove('hidden');
this.classList.add('close');
}
});
}
</script>
</body>
</html>