beardedtek/flowbite-beardedtek.com
1
0
Fork 0
mirror of https://github.com/BeardedTek/flowbite-beardedtek.com.git synced 2025-12-06 05:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
2769e16237fd8a42fe719d05243442fad6ba9cae
flowbite-beardedtek.com/content/landing/mobile-application.html
BeardedTek 47f065dfab INITIAL COMMIT
2025-04-15 14:55:06 -08:00

1367 lines
86 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Tailwind CSS Mobile Application Landing Page - Flowbite
description: Get started with a collection of over 53 page templates based on Tailwind CSS for Marketing UI purposes including landing pages, contact pages, about pages, and more
layout: main
navbar: default
---
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24 pt-20 sm:pt-24 lg:pt-32">
<div class="text-center">
<div>
<h2
class="text-3xl font-extrabold leading-none tracking-tight text-gray-900 dark:text-white sm:text-5xl lg:text-6xl">
Designing Interfaces: <span class="md:block">A User-Centered Approach</span>
</h2>
<p class="mt-4 text-base font-normal text-gray-500 dark:text-gray-400 md:max-w-3xl md:mx-auto sm:text-xl">
This book covers the latest design principles and techniques, including responsive design, mobile
interface design, and
user research methodologies.
</p>
</div>
<div class="sm:flex items-center justify-center gap-4 space-y-4 sm:space-y-0 mt-8">
<a href="#" title=""
class="inline-flex items-center justify-center w-full px-4 py-3 text-left text-white bg-gray-900 rounded-lg sm:w-auto hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300"
role="button">
<svg aria-hidden="true" class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="currentColor">
<path
d="M19.665 16.811a10.316 10.316 0 0 1-1.021 1.837c-.537.767-.978 1.297-1.316 1.592-.525.482-1.089.73-1.692.744-.432 0-.954-.123-1.562-.373-.61-.249-1.17-.371-1.683-.371-.537 0-1.113.122-1.73.371-.616.25-1.114.381-1.495.393-.577.025-1.154-.229-1.729-.764-.367-.32-.826-.87-1.377-1.648-.59-.829-1.075-1.794-1.455-2.891-.407-1.187-.611-2.335-.611-3.447 0-1.273.275-2.372.826-3.292a4.857 4.857 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662c.46 0 1.063.142 1.81.422s1.227.422 1.436.422c.158 0 .689-.167 1.593-.498.853-.307 1.573-.434 2.163-.384 1.6.129 2.801.759 3.6 1.895-1.43.867-2.137 2.08-2.123 3.637.012 1.213.453 2.222 1.317 3.023a4.33 4.33 0 0 0 1.315.863c-.106.307-.218.6-.336.882zM15.998 2.38c0 .95-.348 1.838-1.039 2.659-.836.976-1.846 1.541-2.941 1.452a2.955 2.955 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688.352-.404.8-.741 1.343-1.009.542-.264 1.054-.41 1.536-.435.013.128.019.255.019.381z">
</path>
</svg>
<div class="ml-2.5">
<span class="block text-xs font-normal leading-none">
Download on the
</span>
<span class="block text-lg font-bold leading-tight">
App Store
</span>
</div>
</a>
<a href="#" title=""
class="inline-flex items-center justify-center w-full px-4 py-3 text-left text-white bg-gray-900 rounded-lg sm:w-auto hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300"
role="button">
<svg aria-hidden="true" class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="currentColor">
<path
d="m12.954 11.616 2.957-2.957L6.36 3.291c-.633-.342-1.226-.39-1.746-.016l8.34 8.341zm3.461 3.462 3.074-1.729c.6-.336.929-.812.929-1.34 0-.527-.329-1.004-.928-1.34l-2.783-1.563-3.133 3.132 2.841 2.84zM4.1 4.002c-.064.197-.1.417-.1.658v14.705c0 .381.084.709.236.97l8.097-8.098L4.1 4.002zm8.854 8.855L4.902 20.91c.154.059.32.09.495.09.312 0 .637-.092.968-.276l9.255-5.197-2.666-2.67z">
</path>
</svg>
<div class="ml-2.5">
<span class="block text-xs font-normal leading-none">
Download on the
</span>
<span class="block text-lg font-bold leading-tight">
Google Play
</span>
</div>
</a>
</div>
</div>
<div class="mt-8 sm:mt-16">
<div class="hidden sm:block">
<img class="object-contain w-auto mx-auto rounded-lg dark:hidden h-[600px]"
src="{{< baseurl >}}/images/hero/phone-mockup.png" alt="">
<img class="hidden object-contain w-auto mx-auto rounded-lg dark:block h-[600px]"
src="{{< baseurl >}}/images/hero/phone-mockup-dark.png" alt="">
</div>
<div class="flex items-center justify-center gap-5 sm:gap-6 sm:mt-8">
<div class="flex -space-x-3 overflow-hidden">
<img class="inline-block w-8 h-8 border border-white rounded-full dark:border-gray-900"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/neil-sims.png" alt="">
<img class="inline-block w-8 h-8 border border-white rounded-full dark:border-gray-900"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt="">
<img class="inline-block w-8 h-8 border border-white rounded-full dark:border-gray-900"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gough.png" alt="">
<img class="inline-block w-8 h-8 border border-white rounded-full dark:border-gray-900"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png" alt="">
</div>
<div class="w-px h-8 bg-gray-200 dark:bg-gray-700"></div>
<div>
<div class="flex items-center gap-1.5">
<div class="flex items-center gap-0.5">
<svg class="w-5 h-5 text-yellow-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg class="w-5 h-5 text-yellow-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg class="w-5 h-5 text-yellow-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg class="w-5 h-5 text-yellow-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg class="w-5 h-5 text-yellow-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
</div>
<span class="text-base font-normal text-gray-500 dark:text-gray-400">
5.0
</span>
</div>
<p class="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
Rated Best Over <span class="font-semibold text-gray-900 dark:text-white">15.7k</span> Reviews
</p>
</div>
</div>
</div>
</div>
</section>
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto lg:px-6">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-3xl font-extrabold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-white">
Designed for business teams like yours
</h2>
<p class="mt-4 text-base font-normal text-gray-500 sm:text-xl dark:text-gray-400">
Here we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic
growth.
</p>
</div>
<div class="p-4 mt-8 rounded-lg sm:p-12 lg:mt-16 bg-gray-50 dark:bg-gray-800">
<div class="grid grid-cols-1 gap-8 sm:gap-12 lg:grid-cols-2">
<div class="flex flex-col items-start gap-4 sm:gap-5 sm:flex-row">
<div class="bg-gray-100 dark:bg-gray-700 rounded-full w-16 h-16 lg:w-24 lg:h-24 flex items-center justify-center shrink-0">
<svg aria-hidden="true" class="w-10 lg:w-12 h-10 lg:h-12 text-primary-600 dark:text-primary-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
Automatic categorization
</h3>
<p class="mt-2 text-base font-normal text-gray-500 sm:text-lg dark:text-gray-400">
Flow Budget automatically categorizes your income and expenses, making it easy to track where your money
is going.
</p>
</div>
</div>
<div class="flex flex-col items-start gap-4 sm:gap-5 sm:flex-row">
<div class="bg-gray-100 dark:bg-gray-700 rounded-full w-16 h-16 lg:w-24 lg:h-24 flex items-center justify-center shrink-0">
<svg aria-hidden="true" class="w-10 lg:w-12 h-10 lg:h-12 text-primary-600 dark:text-primary-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
</svg>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
Budgeting methods
</h3>
<p class="mt-2 text-base font-normal text-gray-500 sm:text-lg dark:text-gray-400">
The app offers a variety of budgeting methods, such as 50/30/20 rule, to help users find the approach that
works best
for them.
</p>
</div>
</div>
<div class="flex flex-col items-start gap-4 sm:gap-5 sm:flex-row">
<div class="bg-gray-100 dark:bg-gray-700 rounded-full w-16 h-16 lg:w-24 lg:h-24 flex items-center justify-center shrink-0">
<svg aria-hidden="true" class="w-10 lg:w-12 h-10 lg:h-12 text-primary-600 dark:text-primary-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
Budget goals
</h3>
<p class="mt-2 text-base font-normal text-gray-500 sm:text-lg dark:text-gray-400">
Set budget goals for each category and get real-time updates on how close you are to reaching them.
</p>
</div>
</div>
<div class="flex flex-col items-start gap-4 sm:gap-5 sm:flex-row">
<div class="bg-gray-100 dark:bg-gray-700 rounded-full w-16 h-16 lg:w-24 lg:h-24 flex items-center justify-center shrink-0">
<svg aria-hidden="true" class="w-10 lg:w-12 h-10 lg:h-12 text-primary-600 dark:text-primary-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path>
</svg>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
Reports and Analytics
</h3>
<p class="mt-2 text-base font-normal text-gray-500 sm:text-lg dark:text-gray-400">
We provide detailed reports and analytics that help users understand their spending habits, and make more
informed
financial decisions.
</p>
</div>
</div>
<div class="flex flex-col items-start gap-4 sm:gap-5 sm:flex-row">
<div class="bg-gray-100 dark:bg-gray-700 rounded-full w-16 h-16 lg:w-24 lg:h-24 flex items-center justify-center shrink-0">
<svg aria-hidden="true" class="w-10 lg:w-12 h-10 lg:h-12 text-primary-600 dark:text-primary-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
</svg>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
Cloud synchronization
</h3>
<p class="mt-2 text-base font-normal text-gray-500 sm:text-lg dark:text-gray-400">
Synch your data across multiple devices, so you can access your budget and expenses from anywhere, at any
time, and on
any device.
</p>
</div>
</div>
<div class="flex flex-col items-start gap-4 sm:gap-5 sm:flex-row">
<div class="bg-gray-100 dark:bg-gray-700 rounded-full w-16 h-16 lg:w-24 lg:h-24 flex items-center justify-center shrink-0">
<svg aria-hidden="true" class="w-10 lg:w-12 h-10 lg:h-12 text-primary-600 dark:text-primary-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
Alerts and notifications
</h3>
<p class="mt-2 text-base font-normal text-gray-500 sm:text-lg dark:text-gray-400">
Flow budget will alert you if you are over-budgeting, and remind you of upcoming bills, so you'll never
miss a payment
again.
</p>
</div>
</div>
</div>
</div>
<div class="mt-8 text-center lg:mt-16">
<a href="#" title=""
class="text-white inline-flex items-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
role="button">
Get a demo
<svg aria-hidden="true" class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</section>
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
<div class="grid grid-cols-1 gap-8 lg:gap-16 lg:grid-cols-2">
<div>
<div>
<ul class="flex flex-wrap gap-8 text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
<li role="presentation">
<button class="inline-flex flex-col items-center gap-2.5" id="ios-tab" data-tabs-target="#ios"
type="button" role="tab" aria-controls="ios" aria-selected="false">
<div class="inline-flex items-center justify-center w-12 h-12 text-gray-500 hover:text-gray-900 dark:hover:text-white bg-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg dark:bg-gray-800 dark:text-gray-400">
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path
d="M19.665 16.811a10.316 10.316 0 0 1-1.021 1.837c-.537.767-.978 1.297-1.316 1.592-.525.482-1.089.73-1.692.744-.432 0-.954-.123-1.562-.373-.61-.249-1.17-.371-1.683-.371-.537 0-1.113.122-1.73.371-.616.25-1.114.381-1.495.393-.577.025-1.154-.229-1.729-.764-.367-.32-.826-.87-1.377-1.648-.59-.829-1.075-1.794-1.455-2.891-.407-1.187-.611-2.335-.611-3.447 0-1.273.275-2.372.826-3.292a4.857 4.857 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662c.46 0 1.063.142 1.81.422s1.227.422 1.436.422c.158 0 .689-.167 1.593-.498.853-.307 1.573-.434 2.163-.384 1.6.129 2.801.759 3.6 1.895-1.43.867-2.137 2.08-2.123 3.637.012 1.213.453 2.222 1.317 3.023a4.33 4.33 0 0 0 1.315.863c-.106.307-.218.6-.336.882zM15.998 2.38c0 .95-.348 1.838-1.039 2.659-.836.976-1.846 1.541-2.941 1.452a2.955 2.955 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688.352-.404.8-.741 1.343-1.009.542-.264 1.054-.41 1.536-.435.013.128.019.255.019.381z">
</path>
</svg>
</div>
<span class="text-base font-medium text-gray-500 dark:text-gray-400">
iOS
</span>
</button>
</li>
<li role="presentation">
<button class="inline-flex flex-col items-center gap-2.5" id="android-tab" data-tabs-target="#android"
type="button" role="tab" aria-controls="android" aria-selected="false">
<div
class="inline-flex items-center justify-center w-12 h-12 text-gray-500 hover:text-gray-900 dark:hover:text-white bg-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg dark:bg-gray-800 dark:text-gray-400">
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path
d="M18.344 8.71c-.707 0-1.279.572-1.279 1.278v4.53a1.278 1.278 0 1 0 2.558 0v-4.53c0-.706-.572-1.278-1.279-1.278zm-12.688 0c-.707 0-1.279.572-1.279 1.278v4.53a1.278 1.278 0 1 0 2.558 0v-4.53A1.277 1.277 0 0 0 5.656 8.71zm8.889-3.809.768-1.388a.343.343 0 0 0-.133-.47.344.344 0 0 0-.471.135l-.789 1.42c-.588-.235-1.236-.368-1.92-.368s-1.332.132-1.92.367l-.789-1.418a.344.344 0 0 0-.471-.135.345.345 0 0 0-.133.47l.768 1.388C8.072 5.69 7.148 7.099 7.148 8.71c0 .011 0 .021.002.034-.002.006-.002.013-.002.019v.001h9.703V8.71c.001-1.611-.923-3.019-2.306-3.809zM9.76 6.869a.346.346 0 1 1 .005-.693.346.346 0 0 1-.005.693zm4.48 0a.347.347 0 0 1 0-.692.346.346 0 0 1 0 .692zM7.148 16.12c0 .646.525 1.171 1.174 1.171h.586v2.401a1.279 1.279 0 0 0 2.558 0v-2.401h1.066v2.401c0 .707.572 1.278 1.277 1.278.709 0 1.281-.571 1.281-1.278v-2.401h.586c.648 0 1.174-.524 1.174-1.171V9.028H7.148v7.092z">
</path>
</svg>
</div>
<span class="text-base font-medium text-gray-500 dark:text-gray-400">
Android
</span>
</button>
</li>
</ul>
</div>
<div id="myTabContent" class="mt-8">
<div class="hidden" id="ios" role="tabpanel" aria-labelledby="ios-tab">
<div class="space-y-4 sm:space-y-6 lg:space-y-8">
<div>
<h2 class="text-3xl font-extrabold leading-tight text-gray-900 sm:text-4xl dark:text-white">
Flow Budget: Take Control of your finances with us
</h2>
<p class="mt-4 text-base font-normal text-gray-500 dark:text-gray-400 sm:text-xl">
Our iOS app simplifies expense tracking and budget management for users. Featuring an intuitive interface, our app enables users to effortlessly input their income and expenses, automatically categorizing them for seamless monitoring and organization.
</p>
</div>
<div class="pt-4 border-t border-gray-200 sm:pt-6 lg:pt-8 dark:border-gray-800">
<ul class="space-y-4">
<li class="flex items-center gap-2.5">
<div
class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-100 text-primary-700 shrink-0 dark:bg-primary-900 dark:text-primary-400">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
<span class="text-base font-medium text-gray-900 dark:text-white">
Continuous integration and deployment
</span>
</li>
<li class="flex items-center gap-2.5">
<div
class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-100 text-primary-700 shrink-0 dark:bg-primary-900 dark:text-primary-400">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
<span class="text-base font-medium text-gray-900 dark:text-white">
Development workflow
</span>
</li>
<li class="flex items-center gap-2.5">
<div
class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-100 text-primary-700 shrink-0 dark:bg-primary-900 dark:text-primary-400">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
<span class="text-base font-medium text-gray-900 dark:text-white">
Knowledge management
</span>
</li>
</ul>
<h3 class="mt-6 text-xl font-normal text-gray-500 dark:text-gray-400">
Flow Budget takes the hassle out of budgeting and empowers users to take control of their finances
</h3>
</div>
<div>
<a href="#" title=""
class="inline-flex items-center text-base font-medium text-primary-700 hover:underline dark:text-primary-500">
Learn what makes Flow Budget different
<svg aria-hidden="true" class="w-5 h-5 ml-1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
<div class="hidden" id="android" role="tabpanel" aria-labelledby="android-tab">
<div class="space-y-4 sm:space-y-6 lg:space-y-8">
<div>
<h2 class="text-3xl font-extrabold leading-tight text-gray-900 sm:text-4xl dark:text-white">
Flow Budget: Empower Your Financial Freedom with Us
</h2>
<p class="mt-4 text-base font-normal text-gray-500 dark:text-gray-400 sm:text-xl">
Our Android app streamlines expense tracking and budget management for users. Boasting a user-friendly interface, the app facilitates swift input of income and expenses, automatically categorizing them for effortless monitoring and organization.
</p>
</div>
<div class="pt-4 border-t border-gray-200 sm:pt-6 lg:pt-8 dark:border-gray-800">
<ul class="space-y-4">
<li class="flex items-center gap-2.5">
<div
class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-100 text-primary-700 shrink-0 dark:bg-primary-900 dark:text-primary-400">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
<span class="text-base font-medium text-gray-900 dark:text-white">
Continuous integration and deployment
</span>
</li>
<li class="flex items-center gap-2.5">
<div
class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-100 text-primary-700 shrink-0 dark:bg-primary-900 dark:text-primary-400">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
<span class="text-base font-medium text-gray-900 dark:text-white">
Development workflow
</span>
</li>
<li class="flex items-center gap-2.5">
<div
class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-100 text-primary-700 shrink-0 dark:bg-primary-900 dark:text-primary-400">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
<span class="text-base font-medium text-gray-900 dark:text-white">
Knowledge management
</span>
</li>
</ul>
<h3 class="mt-6 text-xl font-normal text-gray-500 dark:text-gray-400">
Flow Budget takes the hassle out of budgeting and empowers users to take control of their finances
</h3>
</div>
<div>
<a href="#" title=""
class="inline-flex items-center text-base font-medium text-primary-700 hover:underline dark:text-primary-500">
Learn what makes Flow Budget different
<svg aria-hidden="true" class="w-5 h-5 ml-1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="hidden lg:block">
<img class="object-cover w-full dark:hidden" src="{{< baseurl >}}/images/cta/phone-mockup.png"
alt="Phone mockup">
<img class="hidden object-cover w-full dark:block" src="{{< baseurl >}}/images/cta/phone-mockup-dark.png"
alt="Phone mockup">
</div>
</div>
<div class="grid grid-cols-1 gap-8 mt-8 lg:mt-20 lg:gap-16 lg:grid-cols-2">
<div class="hidden lg:block">
<img class="object-cover w-full dark:hidden" src="{{< baseurl >}}/images/cta/feature-illustration.png"
alt="Feature illustration">
<img class="hidden object-cover w-full dark:block"
src="{{< baseurl >}}/images/cta/feature-illustration-dark.png" alt="Feature illustration">
</div>
<div class="space-y-4 sm:space-y-6 lg:space-y-8">
<div>
<h2 class="text-3xl font-extrabold leading-tight text-gray-900 sm:text-4xl dark:text-white">
We invest in the world's potential
</h2>
<p class="mt-4 text-base font-normal text-gray-500 dark:text-gray-400 sm:text-xl">
<span class="font-semibold text-gray-900 dark:text-white">Flowbite Budget</span> is a mobile app that helps
users easily track their expenses and create a budget.
</p>
<p class="mt-4 text-base font-normal text-gray-500 dark:text-gray-400 sm:text-xl">
With a user-friendly interface, the app allows users to quickly input their income and expenses, and then
automatically
categorizes them for easy tracking.
</p>
</div>
<div class="pt-4 border-t border-gray-200 sm:pt-6 lg:pt-8 dark:border-gray-800">
<ul class="space-y-4">
<li class="flex items-center gap-2.5">
<div
class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-100 text-primary-700 shrink-0 dark:bg-primary-900 dark:text-primary-400">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
<span class="text-base font-medium text-gray-900 dark:text-white">
Dynamic reports and dashboards
</span>
</li>
<li class="flex items-center gap-2.5">
<div
class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-100 text-primary-700 shrink-0 dark:bg-primary-900 dark:text-primary-400">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
<span class="text-base font-medium text-gray-900 dark:text-white">
Templates for everyone
</span>
</li>
<li class="flex items-center gap-2.5">
<div
class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-100 text-primary-700 shrink-0 dark:bg-primary-900 dark:text-primary-400">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
<span class="text-base font-medium text-gray-900 dark:text-white">
Development workflow
</span>
</li>
<li class="flex items-center gap-2.5">
<div
class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-100 text-primary-700 shrink-0 dark:bg-primary-900 dark:text-primary-400">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
<span class="text-base font-medium text-gray-900 dark:text-white">
Limitless business automation
</span>
</li>
<li class="flex items-center gap-2.5">
<div
class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-100 text-primary-700 shrink-0 dark:bg-primary-900 dark:text-primary-400">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</div>
<span class="text-base font-medium text-gray-900 dark:text-white">
Knowledge management
</span>
</li>
</ul>
</div>
<div class="flex items-center gap-4">
<a href="#" title=""
class="text-white bg-primary-700 justify-center hover:bg-primary-800 inline-flex items-center focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
role="button">
Start building
<svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</a>
<a href="#" title=""
class="px-5 py-2.5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
role="button">
Get a demo
</a>
</div>
</div>
</div>
</div>
</section>
<section class="border-t border-b border-gray-100 bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
<div class="items-center lg:grid lg:grid-cols-4 lg:gap-16 xl:gap-24">
<div class="col-span-2 mb-8">
<p class="text-lg font-medium text-primary-600 dark:text-primary-500">Trusted Worldwide</p>
<h2 class="mt-3 mb-4 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
Trusted by over 600 million users and 10,000 teams</h2>
<p class="text-gray-500 sm:text-xl dark:text-gray-400">Our rigorous security and compliance standards
are at the heart of all we do. We work tirelessly to protect you and your customers.</p>
<div class="pt-6 mt-6 space-y-4 border-t border-gray-200 dark:border-gray-700">
<div>
<a href="#"
class="inline-flex items-center text-base font-medium text-primary-700 hover:underline dark:text-primary-500 ">
Explore Legality Guide
<svg class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</a>
</div>
<div>
<a href="#"
class="inline-flex items-center text-base font-medium text-primary-700 hover:underline dark:text-primary-500 ">
Visit the Trust Center
<svg class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-span-2 space-y-8 md:grid md:grid-cols-2 md:gap-12 md:space-y-0">
<div>
<svg class="w-10 h-10 mb-2 text-primary-600 md:w-12 md:h-12 dark:text-primary-500" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M2 5a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm14 1a1 1 0 11-2 0 1 1 0 012 0zM2 13a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2zm14 1a1 1 0 11-2 0 1 1 0 012 0z"
clip-rule="evenodd"></path>
</svg>
<h3 class="mb-2 text-2xl font-bold dark:text-white">99.99% uptime</h3>
<p class="text-gray-500 dark:text-gray-400">For Flowbite, with zero maintenance downtime</p>
</div>
<div>
<svg class="w-10 h-10 mb-2 text-primary-600 md:w-12 md:h-12 dark:text-primary-500" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z">
</path>
</svg>
<h3 class="mb-2 text-2xl font-bold dark:text-white">600M+ Users</h3>
<p class="text-gray-500 dark:text-gray-400">Trusted by over 600 milion users around the world</p>
</div>
<div>
<svg class="w-10 h-10 mb-2 text-primary-600 md:w-12 md:h-12 dark:text-primary-500" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z"
clip-rule="evenodd"></path>
</svg>
<h3 class="mb-2 text-2xl font-bold dark:text-white">100+ countries</h3>
<p class="text-gray-500 dark:text-gray-400">Have used Flowbite to create functional websites</p>
</div>
<div>
<svg class="w-10 h-10 mb-2 text-primary-600 md:w-12 md:h-12 dark:text-primary-500" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z">
</path>
</svg>
<h3 class="mb-2 text-2xl font-bold dark:text-white">5+ Million</h3>
<p class="text-gray-500 dark:text-gray-400">Transactions per day</p>
</div>
</div>
</div>
</div>
</section>
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
<div class="max-w-screen-sm mx-auto text-center">
<h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">Testimonials
</h2>
<p class="mb-8 text-gray-500 lg:mb-16 sm:text-xl dark:text-gray-400">Explore the whole collection of
open-source web components and elements built with the utility classes from Tailwind</p>
</div>
<div class="grid lg:grid-cols-2">
<figure class="flex flex-col items-center justify-center px-0 py-8 sm:px-8 text-center border-b border-gray-100 md:p-12 lg:border-r dark:border-gray-800">
<blockquote class="max-w-2xl mx-auto mb-8 text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Speechless with how easy this was to integrate
</h3>
<p class="my-4">"I recently got my hands on Flowbite Pro, and holy crap, I'm speechless with how easy this was
to integrate within my application. Most templates are a pain, code is scattered, and near impossible to
theme.</p>
<p class="my-4">Flowbite has code in one place and I'm not joking when I say it took me a matter of minutes to
copy the code, customise it and integrate within a Laravel + Vue application.</p>
<p class="my-4">If you care for your time, I hands down would go with this."</p>
</blockquote>
<figcaption class="flex items-center justify-center space-x-3">
<img class="rounded-full w-9 h-9"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/karen-nelson.png" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white text-left">
<div>Bonnie Green</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Developer at Open AI</div>
</div>
</figcaption>
</figure>
<figure class="flex flex-col items-center justify-center px-0 py-8 sm:px-8 text-center border-b border-gray-100 md:p-12 dark:border-gray-800">
<blockquote class="max-w-2xl mx-auto mb-8 text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Solid foundation for any project</h3>
<p class="my-4">"FlowBite provides a robust set of design tokens and components based on the popular Tailwind
CSS framework. From the most used UI components like forms and navigation bars to the whole app screens
designed both for desktop and mobile, this UI kit provides a solid foundation for any project.</p>
<p class="my-4">Designing with Figma components that can be easily translated to the utility classes of
Tailwind CSS is a huge timesaver!"</p>
</blockquote>
<figcaption class="flex items-center justify-center space-x-3">
<img class="rounded-full w-9 h-9"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white text-left">
<div>Roberta Casas</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Lead designer at Dropbox</div>
</div>
</figcaption>
</figure>
<figure class="flex flex-col items-center justify-center px-0 py-8 sm:px-8 text-center border-b border-gray-100 lg:border-b-0 md:p-12 lg:border-r dark:border-gray-800">
<blockquote class="max-w-2xl mx-auto mb-8 text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mindblowing workflow and variants</h3>
<p class="my-4">"As someone who mainly designs in the browser, I've been a casual user of Figma, but as soon
as I saw and started playing with FlowBite my mind was 🤯.</p>
<p class="my-4">Everything is so well structured and simple to use (I've learnt so much about Figma by just
using the toolkit).</p>
<p class="my-4">Aesthetically, the well designed components are beautiful and will undoubtedly level up your
next application."</p>
</blockquote>
<figcaption class="flex items-center justify-center space-x-3">
<img class="rounded-full w-9 h-9"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white text-left">
<div>Jese Leos</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Software Engineer at Facebook</div>
</div>
</figcaption>
</figure>
<figure class="flex flex-col items-center justify-center px-0 py-8 sm:px-8 text-center border-gray-100 md:p-12 dark:border-gray-800">
<blockquote class="max-w-2xl mx-auto mb-8 text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Efficient Collaborating</h3>
<p class="my-4">"This is a very complex and beautiful set of elements. Under the hood it comes with the best
things from 2 different worlds: Figma and Tailwind.</p>
<p class="my-4">You have many examples that can be used to create a fast prototype for your team."</p>
</blockquote>
<figcaption class="flex items-center justify-center space-x-3">
<img class="rounded-full w-9 h-9"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/joseph-mcfall.png" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white text-left">
<div>Joseph McFall</div>
<div class="text-sm text-gray-500 dark:text-gray-400">CTO at Google</div>
</div>
</figcaption>
</figure>
</div>
<div class="my-8 text-center sm:mt-16">
<button href="#" class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Show more...</button>
</div>
</section>
<section class="border-t border-b border-gray-100 bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
<div class="max-w-2xl mx-auto text-center">
<h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">How can we help
you?</h2>
<p class="mb-8 text-gray-500 dark:text-gray-400 sm:text-xl">Here are a few of the questions we get the
most. If you don't see what's on your mind, reach out to us anytime on phone, chat, or email.</p>
<div class="max-w-lg mx-auto">
<label for="email-adress-icon"
class="block mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Your Email</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
</svg>
</div>
<input type="text" id="email-adress-icon"
class="block w-full p-4 pl-12 text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Type keywords to find answers">
</div>
<p class="mt-4 text-sm text-left text-gray-500 dark:text-gray-400">You can also browse the topics below to find
what you
are
looking for.</p>
</div>
</div>
<div class="grid gap-8 mt-12 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:mt-16 lg:mt-20">
<div>
<h3 class="mb-4 text-xl font-bold dark:text-white">General</h3>
<ul role="list" class="space-y-4 text-gray-500 dark:text-gray-400">
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">How to update</a>
</li>
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">How to change the language</a>
</li>
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">About forwarding limits</a>
</li>
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">How to update Flowbite</a>
</li>
</ul>
</div>
<div>
<h3 class="mb-4 text-xl font-bold dark:text-white">Android</h3>
<ul role="list" class="space-y-4 text-gray-500 dark:text-gray-400">
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Verifying your number</a>
</li>
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">How to restore your chat history</a>
</li>
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">How to manage your notifications</a>
</li>
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Account & Profile</a>
</li>
</ul>
</div>
<div>
<h3 class="mb-4 text-xl font-bold dark:text-white">Iphone</h3>
<ul role="list" class="space-y-4 text-gray-500 dark:text-gray-400">
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">How to restore your chat history</a>
</li>
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">How to use status</a>
</li>
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">How to manage your notifications</a>
</li>
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Can’t log out</a>
</li>
</ul>
</div>
<div>
<h3 class="mb-4 text-xl font-bold dark:text-white">Web & Desktop</h3>
<ul role="list" class="space-y-4 text-gray-500 dark:text-gray-400">
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">About WhatsApp Web and Desktop</a>
</li>
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">How to log in or out</a>
</li>
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">How to manage your notifications</a>
</li>
<li>
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">How to update Flowbite</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
<div class="grid grid-cols-1 gap-6 text-center sm:gap-16 sm:grid-cols-2 lg:grid-cols-3">
<div>
<div
class="inline-flex items-center justify-center w-16 h-16 mx-auto text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-white">
<svg aria-hidden="true" class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z"
clip-rule="evenodd" />
</svg>
</div>
<div class="mt-4">
<h3 class="text-xl font-bold text-gray-900 dark:text-white">
Company information:
</h3>
<p class="mt-1 text-base font-normal text-gray-500 dark:text-gray-400">
Themesberg LLC<br>Tax id: USXXXXXX
</p>
</div>
</div>
<div>
<div
class="inline-flex items-center justify-center w-16 h-16 mx-auto text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-white">
<svg aria-hidden="true" class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
clip-rule="evenodd" />
</svg>
</div>
<div class="mt-4">
<h3 class="text-xl font-bold text-gray-900 dark:text-white">
Address:
</h3>
<p class="mt-1 text-base font-normal text-gray-500 dark:text-gray-400">
SILVER LAKE, United States<br>1941 Late Avenue<br>Zip Code/Postal code: 03875
</p>
</div>
</div>
<div class="hidden lg:block">
<div
class="inline-flex items-center justify-center w-16 h-16 mx-auto text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-white">
<svg aria-hidden="true" class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
</svg>
</div>
<div class="mt-4">
<h3 class="text-xl font-bold text-gray-900 dark:text-white">
Contact us:
</h3>
<p class="mt-1 text-base font-normal text-gray-500 dark:text-gray-400">
Email us for general queries, including marketing and partnership opportunities.
</p>
<a href="#" title="" class="block mt-1 text-base font-semibold text-gray-900 dark:text-white hover:underline">
hello@company.com
</a>
</div>
</div>
</div>
<div class="max-w-3xl mx-auto mt-24">
<form action="#" class="grid max-w-screen-md grid-cols-1 mx-auto gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
First name
</label>
<input type="text" id="first-name"
class="block w-full p-2.5 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Bonnie" required>
</div>
<div>
<label for="last-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Last name
</label>
<input type="text" id="last-name"
class="block w-full p-2.5 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Green" required>
</div>
<div>
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Your email
</label>
<input type="email" id="email"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="name@flowbite.com" required>
</div>
<div>
<label for="phone-number" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Phone number
</label>
<input type="number" id="phone-number"
class="block w-full p-2.5 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="+(12) 345 6789" required>
</div>
<div>
<div class="flex items-center gap-1.5 mb-2">
<label for="country" class="block text-sm font-medium text-gray-900 dark:text-white">
Country
</label>
<button type="button" data-popover-target="country-description" class="w-4 h-4">
<svg aria-hidden="true" class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd" />
</svg>
<span class="sr-only">Show information</span>
</button>
<div data-popover id="country-description" role="tooltip"
class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
<div class="p-3 space-y-2">
<h3 class="font-semibold text-gray-900 dark:text-white">Country based on fiscal
residency</h3>
<p>Report helps navigate cumulative growth of community activities. Ideally, the chart
should have a growing trend, as stagnating chart signifies a significant decrease of
community activity.</p>
<h3 class="font-semibold text-gray-900 dark:text-white">Double citizenship</h3>
<p>For each date bucket, the all-time volume of activities is calculated. This means
that activities in period n contain all activities up to period n, plus the
activities generated by your community in period.</p>
<a href="#"
class="flex items-center font-medium text-primary-600 dark:text-primary-500 dark:hover:text-primary-600 hover:text-primary-700">Read
more <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg></a>
</div>
<div data-popper-arrow></div>
</div>
</div>
<select id="country"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
<option>Select a country</option>
<option value="US" selected>United States</option>
</select>
</div>
<div>
<div class="flex items-center gap-1.5 mb-2">
<label for="language" class="block text-sm font-medium text-gray-900 dark:text-white">
Language
</label>
<button type="button" data-popover-target="language-description" class="w-4 h-4">
<svg aria-hidden="true" class="text-gray-400 hover:text-gray-900 dark:hover:text-white"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd" />
</svg>
<span class="sr-only">Show information</span>
</button>
<div data-popover id="language-description" role="tooltip"
class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
<div class="p-3 space-y-2">
<h3 class="font-semibold text-gray-900 dark:text-white">Choosing an international
language</h3>
<p>Report helps navigate cumulative growth of community activities. Ideally, the chart
should have a growing trend, as stagnating chart signifies a significant decrease of
community activity.</p>
<a href="#"
class="flex items-center font-medium text-primary-600 dark:text-primary-500 dark:hover:text-primary-600 hover:text-primary-700">Read
more <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg></a>
</div>
<div data-popper-arrow></div>
</div>
</div>
<select id="language"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
<option>Select a language</option>
<option value="US" selected>English (US)</option>
</select>
</div>
<div class="sm:col-span-2">
<label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Your message
</label>
<textarea id="message" rows="6"
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder=""></textarea>
</div>
<div class="sm:col-span-2">
<div class="flex md:items-center">
<input type="checkbox" id="terms" value=""
class="w-4 h-4 bg-gray-100 border-gray-300 rounded-sm text-primary-600 focus:ring-ay-100 -500 dark:focus:ring-ay-100 -600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="terms" class="ml-2 text-sm font-normal text-gray-500 dark:text-gray-400">
By submitting this form, you confirm that you have read and agree to
<a href="#" title="" class="font-medium text-gray-900 underline hover:no-underline dark:text-white">
Terms of Service
</a>
and
<a href="#" title="" class="font-medium text-gray-900 underline hover:no-underline dark:text-white">
Privacy Statement
</a>
</label>
</div>
</div>
<button type="submit"
class="px-5 py-3 text-sm font-medium text-center text-white rounded-lg bg-primary-700 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Send
message</button>
</form>
</div>
</div>
</section>
<section class="border-t border-b border-gray-100 bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
<div class="items-center gap-8 xl:gap-16 md:grid md:grid-cols-2">
<div>
<h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">Let's find
more that
brings
us together.</h2>
<p class="mb-6 text-gray-500 md:text-lg dark:text-gray-400">FFlowbite helps you connect with friends,
family and communities of people who share your interests.</p>
<div class="items-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4">
<a href="#"
class="w-full sm:w-auto bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-800">
<svg class="mr-3 w-7 h-7" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="apple"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path fill="currentColor"
d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z">
</path>
</svg>
<div class="text-left">
<div class="mb-1 text-xs">Download on the</div>
<div class="-mt-1 font-sans text-sm font-semibold">Mac App Store</div>
</div>
</a>
<a href="#"
class="w-full sm:w-auto bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-800">
<svg class="mr-3 w-7 h-7" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google-play"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor"
d="M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l280.8-161.2-60.1-60.1L104.6 499z">
</path>
</svg>
<div class="text-left">
<div class="mb-1 text-xs">Get in on</div>
<div class="-mt-1 font-sans text-sm font-semibold">Google Play</div>
</div>
</a>
</div>
</div>
<div class="hidden md:flex">
<img class="mx-auto w-96 dark:hidden" src="{{< baseurl >}}/images/mobile-app-mockup.png" alt="mobile app">
<img class="hidden mx-auto w-96 dark:block" src="{{< baseurl >}}/images/mobile-app-mockup-dark.png"
alt="mobile app">
</div>
</div>
</div>
</section>
<footer class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
<div class="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">
<div>
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Company</h2>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">About</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Careers</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Brand Center</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Blog</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Help center</h2>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Discord Server</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Twitter</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Facebook</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Contact Us</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Legal</h2>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Privacy Policy</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Licensing</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Terms</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Company</h2>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">About</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Careers</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Brand Center</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Blog</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Download</h2>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">iOS</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Android</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Windows</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">MacOS</a>
</li>
</ul>
</div>
</div>
<div class="mt-8 text-center lg:mt-16 sm:mt-12">
<a href="#" class="flex items-center justify-center mb-5 text-2xl font-semibold text-gray-900 dark:text-white">
<svg class="h-8 mr-2" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.2696 13.126C25.1955 13.6364 24.8589 14.3299 24.4728 14.9328C23.9856 15.6936 23.2125 16.2264 22.3276 16.4114L18.43 17.2265C17.8035 17.3575 17.2355 17.6853 16.8089 18.1621L14.2533 21.0188C13.773 21.5556 13.4373 21.4276 13.4373 20.7075C13.4315 20.7342 12.1689 23.9903 15.5149 25.9202C16.8005 26.6618 18.6511 26.3953 19.9367 25.6538L26.7486 21.7247C29.2961 20.2553 31.0948 17.7695 31.6926 14.892C31.7163 14.7781 31.7345 14.6639 31.7542 14.5498L25.2696 13.126Z"
fill="url(#paint0_linear_11430_22515)" />
<path
d="M23.5028 9.20133C24.7884 9.94288 25.3137 11.0469 25.3137 12.53C25.3137 12.7313 25.2979 12.9302 25.2694 13.1261L28.0141 14.3051L31.754 14.5499C32.2329 11.7784 31.2944 8.92561 29.612 6.65804C28.3459 4.9516 26.7167 3.47073 24.7581 2.34097C23.167 1.42325 21.5136 0.818599 19.8525 0.486816L17.9861 2.90382L17.3965 5.67918L23.5028 9.20133Z"
fill="url(#paint1_linear_11430_22515)" />
<path
d="M1.5336 11.2352C1.5329 11.2373 1.53483 11.238 1.53556 11.2358C1.67958 10.8038 1.86018 10.3219 2.08564 9.80704C3.26334 7.11765 5.53286 5.32397 8.32492 4.40943C11.117 3.49491 14.1655 3.81547 16.7101 5.28323L17.3965 5.67913L19.8525 0.486761C12.041 -1.07341 4.05728 3.51588 1.54353 11.2051C1.54233 11.2087 1.53796 11.2216 1.5336 11.2352Z"
fill="url(#paint2_linear_11430_22515)" />
<path
d="M19.6699 25.6538C18.3843 26.3953 16.8003 26.3953 15.5147 25.6538C15.3402 25.5531 15.1757 25.4399 15.0201 25.3174L12.7591 26.8719L10.8103 30.0209C12.9733 31.821 15.7821 32.3997 18.589 32.0779C20.7013 31.8357 22.7995 31.1665 24.7582 30.0368C26.3492 29.1191 27.7 27.9909 28.8182 26.7195L27.6563 23.8962L25.7762 22.1316L19.6699 25.6538Z"
fill="url(#paint3_linear_11430_22515)" />
<path
d="M15.0201 25.3175C14.0296 24.5373 13.4371 23.3406 13.4371 22.0588V21.931V11.2558C13.4371 10.6521 13.615 10.5494 14.1384 10.8513C13.3323 10.3864 11.4703 8.79036 9.17118 10.1165C7.88557 10.858 6.8269 12.4949 6.8269 13.978V21.8362C6.8269 24.775 8.34906 27.8406 10.5445 29.7966C10.6313 29.874 10.7212 29.9469 10.8103 30.0211L15.0201 25.3175Z"
fill="url(#paint4_linear_11430_22515)" />
<path
d="M28.6604 5.49565C28.6589 5.49395 28.6573 5.49532 28.6589 5.49703C28.9613 5.83763 29.2888 6.23485 29.6223 6.68734C31.3648 9.05099 32.0158 12.0447 31.4126 14.9176C30.8093 17.7906 29.0071 20.2679 26.4625 21.7357L25.7761 22.1316L28.8181 26.7195C34.0764 20.741 34.09 11.5388 28.6815 5.51929C28.6789 5.51641 28.67 5.50622 28.6604 5.49565Z"
fill="url(#paint5_linear_11430_22515)" />
<path
d="M7.09355 13.978C7.09354 12.4949 7.88551 11.1244 9.17113 10.3829C9.34564 10.2822 9.52601 10.1965 9.71002 10.1231L9.49304 7.38962L7.96861 4.26221C5.32671 5.23364 3.1897 7.24125 2.06528 9.83067C1.2191 11.7793 0.75001 13.9294 0.75 16.1888C0.75 18.0243 1.05255 19.7571 1.59553 21.3603L4.62391 21.7666L7.09355 21.0223V13.978Z"
fill="url(#paint6_linear_11430_22515)" />
<path
d="M9.71016 10.1231C10.8817 9.65623 12.2153 9.74199 13.3264 10.3829L13.4372 10.4468L22.3326 15.5777C22.9566 15.9376 22.8999 16.2918 22.1946 16.4392L22.7078 16.332C23.383 16.1908 23.9999 15.8457 24.4717 15.3428C25.2828 14.4782 25.5806 13.4351 25.5806 12.5299C25.5806 11.0468 24.7886 9.67634 23.503 8.93479L16.6911 5.00568C14.1436 3.53627 11.0895 3.22294 8.29622 4.14442C8.18572 4.18087 8.07756 4.2222 7.96875 4.26221L9.71016 10.1231Z"
fill="url(#paint7_linear_11430_22515)" />
<path
d="M20.0721 31.8357C20.0744 31.8352 20.0739 31.8332 20.0717 31.8337C19.6252 31.925 19.1172 32.0097 18.5581 32.0721C15.638 32.3978 12.7174 31.4643 10.5286 29.5059C8.33986 27.5474 7.09347 24.7495 7.09348 21.814L7.09347 21.0222L1.59546 21.3602C4.1488 28.8989 12.1189 33.5118 20.0411 31.8421C20.0449 31.8413 20.0582 31.8387 20.0721 31.8357Z"
fill="url(#paint8_linear_11430_22515)" />
<defs>
<linearGradient id="paint0_linear_11430_22515" x1="20.8102" y1="23.9532" x2="23.9577" y2="12.9901"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient id="paint1_linear_11430_22515" x1="28.0593" y1="10.5837" x2="19.7797" y2="2.33321"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient id="paint2_linear_11430_22515" x1="16.9145" y1="5.2045" x2="4.42432" y2="5.99375"
gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
<linearGradient id="paint3_linear_11430_22515" x1="16.0698" y1="28.846" x2="27.2866" y2="25.8192"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient id="paint4_linear_11430_22515" x1="8.01881" y1="15.8661" x2="15.9825" y2="24.1181"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient id="paint5_linear_11430_22515" x1="26.2004" y1="21.8189" x2="31.7569" y2="10.6178"
gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
<linearGradient id="paint6_linear_11430_22515" x1="6.11387" y1="9.31427" x2="3.14054" y2="20.4898"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient id="paint7_linear_11430_22515" x1="21.2932" y1="8.78271" x2="10.4278" y2="11.488"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient id="paint8_linear_11430_22515" x1="7.15667" y1="21.5399" x2="14.0824" y2="31.9579"
gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
</defs>
</svg>
Flowbite
</a>
<span class="block text-sm text-center text-gray-500 dark:text-gray-400">© 2021-<span id="currentYear">2022</span> <a href="#"
class="hover:underline">Flowbite™</a>. All Rights Reserved.
</span>
<ul class="flex justify-center mt-5 space-x-5">
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</footer>
Reference in New Issue View Git Blame Copy Permalink