mirror of
https://github.com/BeardedTek/flowbite-beardedtek.com.git
synced 2025-12-06 05:31:52 +00:00
change hero height to 55vh
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
title: "Contact"
|
||||
date: 2025-04-15T17:09:20+06:00
|
||||
description : "Contact The Bearded Tek"
|
||||
layout: main
|
||||
layout: index
|
||||
navbar:
|
||||
enable: true
|
||||
header:
|
||||
|
||||
@@ -1,637 +0,0 @@
|
||||
---
|
||||
title: Tailwind CSS Contact Page with search bar - 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="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 pt-20 sm:pt-24 lg:pt-32">
|
||||
<div class="max-w-2xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
|
||||
How can we help you?
|
||||
</h2>
|
||||
<p class="mt-4 text-base text-gray-500 sm:text-xl dark:text-gray-500">
|
||||
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>
|
||||
|
||||
<div class="max-w-2xl mx-auto mt-8">
|
||||
<label for="email-adress-icon"
|
||||
class="block mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300">
|
||||
Search keywords
|
||||
</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="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||
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-center text-gray-500 dark:text-gray-400">
|
||||
You can also browse the topics below to find what you are looking for.
|
||||
</p>
|
||||
</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 class="p-6 bg-white rounded-lg shadow-sm dark:bg-gray-700">
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 mb-4 rounded-lg bg-primary-100 dark:bg-primary-900 lg:h-12 lg:w-12">
|
||||
<svg class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300" fill="currentColor"
|
||||
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
|
||||
<path fill-rule="evenodd"
|
||||
d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mb-4 text-xl font-bold dark:text-white">
|
||||
General
|
||||
</h3>
|
||||
<ul role="list" class="mb-4 space-y-3 text-sm text-gray-500 dark:text-gray-400">
|
||||
<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>
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">How to change privacy settings?</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">See
|
||||
all</a>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-white rounded-lg shadow-sm dark:bg-gray-700">
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 mb-4 rounded-lg bg-primary-100 dark:bg-primary-900 lg:h-12 lg:w-12">
|
||||
<svg class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300" fill="currentColor"
|
||||
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"></path>
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mb-4 text-xl font-bold dark:text-white">
|
||||
License
|
||||
</h3>
|
||||
<ul role="list" class="mb-4 space-y-3 text-sm 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>
|
||||
</ul>
|
||||
<a href="#" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">See
|
||||
all</a>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-white rounded-lg shadow-sm dark:bg-gray-700">
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 mb-4 rounded-lg bg-primary-100 dark:bg-primary-900 lg:h-12 lg:w-12">
|
||||
<svg class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300" fill="currentColor"
|
||||
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5zm4.707 3.707a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L8.414 9H10a3 3 0 013 3v1a1 1 0 102 0v-1a5 5 0 00-5-5H8.414l1.293-1.293z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mb-4 text-xl font-bold dark:text-white">
|
||||
Refund policy
|
||||
</h3>
|
||||
<ul role="list" class="mb-4 space-y-4 text-sm 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>
|
||||
</ul>
|
||||
<a href="#" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">See
|
||||
all</a>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-white rounded-lg shadow-sm dark:bg-gray-700">
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 mb-4 rounded-lg bg-primary-100 dark:bg-primary-900 lg:h-12 lg:w-12">
|
||||
<svg class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300" fill="currentColor"
|
||||
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mb-4 text-xl font-bold dark:text-white">
|
||||
Account
|
||||
</h3>
|
||||
<ul role="list" class="mb-4 space-y-3 text-sm 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>
|
||||
</ul>
|
||||
<a href="#" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">See
|
||||
all</a>
|
||||
</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">
|
||||
Flowbite 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@flowbite.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-3xl mx-auto mt-8 lg: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>
|
||||
<option value="DE">Germany</option>
|
||||
<option value="FR">France</option>
|
||||
<option value="GB">United Kingdom</option>
|
||||
<option value="ES">Spain</option>
|
||||
<option value="CA">Canada</option>
|
||||
<option value="JP">Japan</option>
|
||||
<option value="CN">People's Republic of China</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>
|
||||
<option value="DE">German</option>
|
||||
<option value="FR">French</option>
|
||||
<option value="ES">Spanish</option>
|
||||
<option value="JP">Japanese</option>
|
||||
<option value="NL">Dutch</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-primary-500 dark:focus:ring-primary-600 dark: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, 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="max-w-screen-sm mx-auto space-y-6 text-center">
|
||||
<h2 class="text-3xl font-extrabold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-white">
|
||||
Start your free trial
|
||||
</h2>
|
||||
<p class="text-gray-500 dark:text-gray-400 md:text-lg">
|
||||
Try Flowbite Platform for 30 days. No credit card required.
|
||||
</p>
|
||||
<a href="#"
|
||||
class="inline-flex px-5 py-3 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">
|
||||
Free trial for 30 days
|
||||
</a>
|
||||
</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">
|
||||
<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 sm:mt-12 lg:mt-16">
|
||||
<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>
|
||||
@@ -1,470 +0,0 @@
|
||||
---
|
||||
title: Tailwind CSS Page with FAQ - 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="max-w-screen-md">
|
||||
<h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl lg:mb-8 dark:text-white">
|
||||
How can we help you?
|
||||
</h2>
|
||||
<label for="search-faq" 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 d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
|
||||
<path fill-rule="evenodd"
|
||||
d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<input type="text" id="search-faq"
|
||||
class="block w-full p-4 pl-12 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="eg. how to install the Flowbite JS package">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-8 my-8 xl:gap-16 sm:grid-cols-2 md:grid-cols-3">
|
||||
<div class="p-4 border border-gray-200 rounded-lg shadow-sm lg:p-8 dark:border-gray-700 dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-xl font-extrabold dark:text-white">
|
||||
Billing & Plans
|
||||
</h3>
|
||||
<ul role="list" class="space-y-3 font-medium text-primary-700 dark:text-primary-500">
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Flowbite plans & prices</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Switch plans and add-ons</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">I can't log in to Flowbite</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">The Disney Bundle</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Student Discount on Flowbite</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="p-4 border border-gray-200 rounded-lg shadow-sm lg:p-8 dark:border-gray-700 dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-xl font-extrabold dark:text-white">
|
||||
Using Flowbite
|
||||
</h3>
|
||||
<ul role="list" class="space-y-3 font-medium text-primary-700 dark:text-primary-500">
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Parental Controls</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Devices to watch Flowbite</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Home location for Live TV</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Live TV Guide</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Fix buffering issues</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="p-4 border border-gray-200 rounded-lg shadow-sm lg:p-8 dark:border-gray-700 dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-xl font-extrabold dark:text-white">
|
||||
What’s on Flowbite
|
||||
</h3>
|
||||
<ul role="list" class="space-y-3 font-medium text-primary-700 dark:text-primary-500">
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">NEW this month!</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Sports Add-on for Live TV</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Watch live sports</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">FX shows & movies</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Super Bowl 2022</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="items-center justify-between pt-5 mb-8 border-t border-gray-200 sm:mb-24 sm:flex dark:border-gray-800">
|
||||
<div class="mb-4 sm:mb-0">
|
||||
<h3 class="mb-2 text-2xl font-extrabold text-gray-900 dark:text-white">
|
||||
Not what you were looking for?
|
||||
</h3>
|
||||
<p class="text-gray-500 sm:text-xl dark:text-gray-400">
|
||||
Browse through all of our Help Center articles
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a href="#" class="inline-flex items-center justify-center px-4 py-2.5 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-900">
|
||||
View All Topics
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-16 lg:grid-cols-3">
|
||||
<div class="hidden lg:block">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Points of contact</h3>
|
||||
<h4 class="mb-1 font-medium text-gray-900 dark:text-white">U.S. Flowbite</h4>
|
||||
<address class="text-sm font-normal text-gray-500 dark:text-gray-400 non-italic">
|
||||
11350 McCormick Rd, EP III, Suite 200,
|
||||
<br>Hunt Valley, MD 21031
|
||||
</address>
|
||||
<h4 class="mt-4 mb-1 font-medium text-gray-900 dark:text-white">Information & Sales</h4>
|
||||
<p class="text-sm font-medium text-primary-700 hover:underline dark:text-primary-500"><a
|
||||
href="#">sales@flowbite.com</a></p>
|
||||
<h4 class="mt-4 mb-1 font-medium text-gray-900 dark:text-white">Support</h4>
|
||||
<p class="text-sm font-medium text-primary-700 hover:underline dark:text-primary-500"><a
|
||||
href="#">support@flowbite.com</a></p>
|
||||
<h4 class="mt-4 mb-1 font-medium text-gray-900 dark:text-white">Verification of Employment</h4>
|
||||
<p class="text-sm font-medium text-primary-700 hover:underline dark:text-primary-500"><a
|
||||
href="#">hr@flowbite.com</a></p>
|
||||
<h3 class="mt-5 mb-4 text-lg font-semibold text-gray-900 dark:text-white">Our offices around the world</h3>
|
||||
<h4 class="mt-4 mb-1 font-medium text-gray-900 dark:text-white">Canada</h4>
|
||||
<address class="text-sm font-normal text-gray-500 dark:text-gray-400 non-italic">
|
||||
5333 Avenue Casgrain #1201,
|
||||
<br>Montréal, QC H2T 1X3
|
||||
</address>
|
||||
<h4 class="mt-4 mb-1 font-medium text-gray-900 dark:text-white">Germany</h4>
|
||||
<address class="text-sm font-normal text-gray-500 dark:text-gray-400 non-italic">
|
||||
Neue Schönhauser Str. 3-5,
|
||||
<br>10178 Berlin
|
||||
</address>
|
||||
<h4 class="mt-4 mb-1 font-medium text-gray-900 dark:text-white">France</h4>
|
||||
<address class="text-sm font-normal text-gray-500 dark:text-gray-400 non-italic">
|
||||
266 Place Ernest Granier,
|
||||
<br>34000 Montpellier
|
||||
</address>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2">
|
||||
<h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 lg:mb-8 sm:text-4xl dark:text-white">Still
|
||||
need help?</h2>
|
||||
<form action="#" class="space-y-6 md:space-y-8">
|
||||
<div>
|
||||
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email
|
||||
address <span class="text-xs text-gray-500 dark:text-gray-400">(So we can reply to you)</span></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>
|
||||
<div class="flex items-center mb-2 gap-1.5">
|
||||
<label for="topic" class="block text-sm font-medium text-gray-900 dark:text-white">
|
||||
Select a topic
|
||||
</label>
|
||||
<button type="button" data-popover-target="topic-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="topic-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 a topic</h3>
|
||||
<p>Selecting a topic for a contact page involves determining the key areas or subjects that users may want to inquire about or communicate with your organization regarding.</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="topic"
|
||||
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 selected>Select a topic</option>
|
||||
<option value="US">Switch plans and add-ons</option>
|
||||
<option value="CA">Billing & Invoice</option>
|
||||
<option value="FR">I can't log in to Flowbite</option>
|
||||
<option value="DE">Parental controls</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="subject" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Subject</label>
|
||||
<input type="text" id="subject"
|
||||
class="block w-full p-3 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="Let us know how we can help you" required>
|
||||
</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="Leave a comment..."></textarea>
|
||||
<div class="flex mt-4">
|
||||
<input id="default-checkbox" type="checkbox" value=""
|
||||
class="w-4 h-4 mt-0.5 text-primary-700 bg-gray-100 border-gray-300 rounded-sm focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm text-gray-500 dark:text-gray-400">By
|
||||
submitting this form, you confirm that you have read and agree to our <a
|
||||
class="font-normal text-gray-900 underline hover:no-underline dark:text-white" href="#">Terms of
|
||||
Service</a> and <a class="font-normal text-gray-900 underline hover:no-underline dark:text-white"
|
||||
href="#">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>
|
||||
</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-screen-sm mx-auto space-y-6 text-center">
|
||||
<h2 class="text-3xl font-extrabold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-white">
|
||||
Start your free trial today
|
||||
</h2>
|
||||
<p class="text-gray-500 dark:text-gray-400 md:text-lg">
|
||||
Try Flowbite Platform for 30 days. No credit card required.
|
||||
</p>
|
||||
<a href="#"
|
||||
class="inline-flex px-5 py-3 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">
|
||||
Free trial for 30 days
|
||||
</a>
|
||||
</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">
|
||||
<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 sm:mt-12 lg:mt-16">
|
||||
<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>
|
||||
@@ -1,378 +0,0 @@
|
||||
---
|
||||
title: Tailwind CSS Contact Page with background image - 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: background
|
||||
---
|
||||
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div
|
||||
class="bg-[url('https://flowbite.s3.amazonaws.com/blocks/marketing-ui/contact/laptop-human.jpg')] bg-no-repeat bg-cover bg-center bg-gray-700 bg-blend-multiply">
|
||||
<div class="max-w-screen-sm px-4 mx-auto text-center pb-72 lg:pb-80 pt-20 sm:pt-24 lg:pt-32">
|
||||
<h2 class="mb-4 text-3xl font-extrabold tracking-tight text-white sm:text-4xl">Contact Us</h2>
|
||||
<p class="mb-16 text-gray-400 sm:text-xl">We use an agile approach to test assumptions and connect with
|
||||
the needs of your audience early and often.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-screen-xl px-4 py-16 mx-auto -mt-96 sm:py-24">
|
||||
<form action="#" class="grid max-w-screen-md grid-cols-1 gap-6 md:gap-8 p-4 md:p-8 mx-auto mb-16 bg-white border border-gray-200 rounded-lg shadow-md lg:mb-28 dark:bg-gray-800 dark:border-gray-700 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-3 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-3 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-3 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-3 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 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="Leave a comment..."></textarea>
|
||||
<div class="flex mt-4">
|
||||
<input id="default-checkbox" type="checkbox" value=""
|
||||
class="w-4 h-4 mt-0.5 text-primary-700 bg-gray-100 border-gray-300 rounded-sm focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm text-gray-500 dark:text-gray-400">I confirm that I have read and agree to our <a
|
||||
class="font-normal text-gray-900 underline hover:no-underline dark:text-white" href="#">Terms of
|
||||
Service</a> and <a class="font-normal text-gray-900 underline hover:no-underline dark:text-white"
|
||||
href="#">Privacy Statement</a>.</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="py-2.5 px-5 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 class="space-y-8 text-center md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-12 lg:gap-16 md:space-y-0">
|
||||
<div>
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 mx-auto mb-4 bg-gray-100 rounded-lg dark:bg-gray-800 lg:h-16 lg:w-16">
|
||||
<svg class="w-5 h-5 text-gray-600 lg:w-8 lg:h-8 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
|
||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="mb-2 text-xl font-bold dark:text-white">Email us:</p>
|
||||
<p class="mb-3 text-gray-500 dark:text-gray-400">Email us for general queries, including marketing and
|
||||
partnership opportunities.</p>
|
||||
<a href="mailto:abc@example.com"
|
||||
class="font-semibold text-primary-700 dark:text-primary-500 hover:underline">hello@flowbite.com</a>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 mx-auto mb-4 bg-gray-100 rounded-lg dark:bg-gray-800 lg:h-16 lg:w-16">
|
||||
<svg class="w-5 h-5 text-gray-600 lg:w-8 lg:h-8 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<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">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="mb-2 text-xl font-bold dark:text-white">Call us:</p>
|
||||
<p class="mb-3 text-gray-500 dark:text-gray-400">Call us to speak to a member of our team. We are always happy
|
||||
to help.</p>
|
||||
<span class="font-semibold text-primary-700 dark:text-primary-500">+1 (646) 786-5060</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 mx-auto mb-4 bg-gray-100 rounded-lg dark:bg-gray-800 lg:h-16 lg:w-16">
|
||||
<svg class="w-5 h-5 text-gray-600 lg:w-8 lg:h-8 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.525a3.997 3.997 0 00.078-2.183l1.562-1.562C15.802 8.249 16 9.1 16 10zm-5.165 3.913l1.58 1.58A5.98 5.98 0 0110 16a5.976 5.976 0 01-2.516-.552l1.562-1.562a4.006 4.006 0 001.789.027zm-4.677-2.796a4.002 4.002 0 01-.041-2.08l-.08.08-1.53-1.533A5.98 5.98 0 004 10c0 .954.223 1.856.619 2.657l1.54-1.54zm1.088-6.45A5.974 5.974 0 0110 4c.954 0 1.856.223 2.657.619l-1.54 1.54a4.002 4.002 0 00-2.346.033L7.246 4.668zM12 10a2 2 0 11-4 0 2 2 0 014 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="mb-2 text-xl font-bold dark:text-white">Support</p>
|
||||
<p class="mb-3 text-gray-500 dark:text-gray-400">Email us for general queries, including marketing and
|
||||
partnership opportunities.</p>
|
||||
<a href="#"
|
||||
class="inline-flex px-4 py-2 text-sm font-medium text-center border rounded-lg text-primary-700 border-primary-700 hover:text-white hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600 dark:focus:ring-primary-800">Support
|
||||
center</a>
|
||||
</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="max-w-2xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
|
||||
Get started with Flowbite today
|
||||
</h2>
|
||||
<p class="mt-4 text-base text-gray-500 md:text-lg dark:text-gray-400">
|
||||
Connecting with your audience has never been easier with Flowbite straightforward email marketing and automation
|
||||
tools.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form action="#" class="max-w-lg mx-auto mt-8">
|
||||
<div class="block sm:flex items-center mb-3">
|
||||
<div class="relative w-full mr-3 mb-4 sm:mb-0">
|
||||
<label for="member_email" class="hidden mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Email
|
||||
address</label>
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
|
||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<input class="block w-full p-3 pl-10 text-sm 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="Enter your email" type="email" name="member[email]" id="member_email" required="">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="submit" value="Try for free"
|
||||
class="w-full sm:w-auto py-3 px-5 text-sm font-medium text-center text-white rounded-lg cursor-pointer bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||
name="member_submit" id="member_submit">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-left text-gray-500 dark:text-gray-300">
|
||||
Instant signup. No credit card required.
|
||||
</div>
|
||||
</form>
|
||||
</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">
|
||||
<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 sm:mt-12 lg:mt-16">
|
||||
<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>
|
||||
@@ -1,382 +0,0 @@
|
||||
---
|
||||
title: Tailwind CSS Contact Page with options - 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="max-w-screen-sm mx-auto">
|
||||
<h2 class="mb-8 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">Contact Us</h2>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="account_1" class="block mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-400">Account
|
||||
recovery type</label>
|
||||
<select id="account_1"
|
||||
class="block py-2.5 px-0 w-full text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-primary-500 focus:outline-none focus:ring-0 focus:border-primary-600 peer">
|
||||
<option>Account Login & Recovery</option>
|
||||
<option>Account Password</option>
|
||||
<option>Account Type</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="account_2" class="block mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-400">Account
|
||||
recovery type</label>
|
||||
<select id="account_2"
|
||||
class="block py-2.5 px-0 w-full text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-primary-500 focus:outline-none focus:ring-0 focus:border-primary-600 peer">
|
||||
<option>Account Access</option>
|
||||
<option>Account Password</option>
|
||||
<option>Account Status</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-8 mb-5 text-xl font-extrabold text-gray-900 dark:text-white">Popular guides & tutorials</h3>
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<a href="#" class="font-semibold text-primary-700 hover:underline dark:text-primary-500">I Can't Log In</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="font-semibold text-primary-700 hover:underline dark:text-primary-500">I Think My Account
|
||||
Has
|
||||
Been Compromised</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="font-semibold text-primary-700 hover:underline dark:text-primary-500">Recover Username or
|
||||
Reset Password</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="font-semibold text-primary-700 hover:underline dark:text-primary-500">Troubleshoot the
|
||||
Signup
|
||||
Activation Email</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="font-semibold text-primary-700 hover:underline dark:text-primary-500">Activate Account
|
||||
Notifications</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="font-semibold text-primary-700 hover:underline dark:text-primary-500">Manage Account Login
|
||||
and Profile</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="font-semibold text-primary-600 hover:underline dark:text-primary-500">Set Account Security
|
||||
Options</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="mt-8 mb-5 text-xl font-extrabold text-gray-900 dark:text-white">Didn't find what you're looking for?
|
||||
</h3>
|
||||
|
||||
<form action="#" class="grid max-w-screen-md grid-cols-1 gap-6 sm:gap-8 mx-auto">
|
||||
<div>
|
||||
<label for="full-name" class="sr-only">
|
||||
Full name
|
||||
</label>
|
||||
<input type="text" id="full-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="Your name" required>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="sr-only">
|
||||
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@example.com" required>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="phone-number" class="sr-only">
|
||||
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="+1(646) 786-5060" required>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="message" class="sr-only">
|
||||
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="Write your message here"></textarea>
|
||||
|
||||
<p class="mt-4 text-sm text-gray-500 dark:text-gray-400">By submitting this form you agree to our <a href="#"
|
||||
class="text-primary-700 underline hover:no-underline dark:text-primary-500">terms and conditions</a> and our <a
|
||||
href="#" class="text-primary-700 underline hover:no-underline dark:text-primary-500">privacy policy</a> which explains
|
||||
how we may
|
||||
collect, use and disclose your personal information including to third parties.</p>
|
||||
</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">
|
||||
Submit
|
||||
</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="max-w-2xl mx-auto sm:text-center">
|
||||
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
|
||||
Sign up for our newsletter
|
||||
</h2>
|
||||
<p class="mt-4 text-base text-gray-500 sm:text-xl dark:text-gray-400">
|
||||
Stay up to date with the roadmap progress, announcements and exclusive discounts feel free to sign up with your
|
||||
email.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form action="#" class="max-w-lg mx-auto mt-8">
|
||||
<div class="items-center max-w-screen-sm mx-auto mb-3 space-y-4 sm:flex sm:space-y-0">
|
||||
<div class="relative w-full">
|
||||
<label for="email" class="hidden mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Email
|
||||
address</label>
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
|
||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
class="block w-full p-3 pl-10 text-sm text-gray-900 bg-white border border-gray-300 rounded-lg sm:rounded-none sm:rounded-l-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="Enter your email" type="email" id="email" required="">
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit"
|
||||
class="w-full px-5 py-3 text-sm font-medium text-center text-white border rounded-lg cursor-pointer bg-primary-700 border-primary-700 sm:rounded-none sm:rounded-r-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:border-primary-600 dark:hover:border-primary-700 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-screen-sm mx-auto text-sm text-left text-gray-500 newsletter-form-footer dark:text-gray-300">
|
||||
We care about the protection of your data. Read our <a href="#"
|
||||
class="font-medium text-gray-900 underline dark:text-white">Privacy Policy</a>.
|
||||
</div>
|
||||
</form>
|
||||
</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">
|
||||
<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 sm:mt-12 lg:mt-16">
|
||||
<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
Block a user