Help Center Using Tailwind UI
A Help Center designed with Tailwind offers a user-friendly and visually pleasing platform for users to easily access resources, FAQs, and support, ensuring a seamless and informative assistance experience. Component Inspired design by Ildiko Gaspar from dribbble.
section
Loading component...
186 lines
<!-- Component Inspired design by Ildiko Gaspar from dribbble https://dribbble.com/shots/12141533-Help-Center-UI-Design -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<section class="bg-[#25292E]">
<div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
<div class="mb-12">
<div class="mx-auto text-center">
<div class="col-span-2">
<div>
<h2 class="mb-8 text-2xl font-bold text-white sm:text-4xl">
We can we help you with
</h2>
</div>
</div>
<div class="max-w-xl mx-auto lg:flex lg:items-end">
<form class="w-full">
<label for="search" class="sr-only"> Email </label>
<div class="bg-gray-300 sm:flex sm:items-center">
<input type="email" id="search" placeholder="Find anything"
class="w-full px-6 py-4 font-medium text-gray-800 bg-gray-300 border-none sm:text-sm focus:outline-none placeholder:text-gray-600"/>
<button
class="w-full px-6 py-4 mt-1 text-sm font-bold tracking-wide text-white uppercase transition-none bg-gray-950 hover:bg-black sm:mt-0 sm:w-auto sm:shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"
class="w-6 h-6 mx-auto text-center text-white current-fill">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="w-full max-w-4xl py-8 mx-auto text-center bg-white">
<h2 class="mb-8 text-2xl font-bold text-gray-800">Top Questions</h2>
<div class="grid grid-cols-2 gap-8 px-16 py-4 lg:grid-cols-4">
<div
class="flex items-center justify-center col-span-2 p-4 border cursor-pointer sm:col-span-1 hover:border-black">
<p class="text-sm font-medium text-gray-900">About actions</p>
</div>
<div
class="flex items-center justify-center col-span-2 p-4 border cursor-pointer sm:col-span-1 hover:border-black">
<p class="text-sm font-medium text-gray-900">Managing packages</p>
</div>
<div
class="flex items-center justify-center col-span-2 p-4 border cursor-pointer sm:col-span-1 hover:border-black">
<p class="text-sm font-medium text-gray-900">Authentication</p>
</div>
<div
class="flex items-center justify-center col-span-2 p-4 border cursor-pointer sm:col-span-1 hover:border-black">
<p class="text-sm font-medium text-gray-900">Notifications</p>
</div>
</div>
</div>
<div class="grid max-w-4xl grid-cols-2 px-16 mx-auto bg-white lg:grid-cols-4 gap-y-8 lg:gap-x-16">
<div class="col-span-2 sm:col-span-1">
<p class="text-sm font-bold text-gray-900 uppercase">Documentation</p>
<ul class="mt-6 space-y-4 text-sm">
<li>
<a href="#" class="text-gray-700 transition hover:opacity-75">
Help
</a>
</li>
<li>
<a href="#" class="text-gray-700 transition hover:opacity-75">
Enterprise Server
</a>
</li>
<li>
<a href="#" class="text-gray-700 transition hover:opacity-75">
Desktop
</a>
</li>
</ul>
</div>
<div class="col-span-2 sm:col-span-1">
<p class="text-sm font-bold text-gray-900 uppercase">Community</p>
<ul class="mt-6 space-y-4 text-sm">
<li>
<a href="#" class="text-gray-700 transition hover:opacity-75">
Documentation
</a>
</li>
<li>
<a href="#" class="text-gray-700 transition hover:opacity-75">
Atom
</a>
</li>
<li>
<a href="#" class="text-gray-700 transition hover:opacity-75">
Forum
</a>
</li>
</ul>
</div>
<div class="col-span-2 sm:col-span-1">
<p class="text-sm font-bold text-gray-900 uppercase">News</p>
<ul class="mt-6 space-y-4 text-sm">
<li>
<a href="#" class="text-gray-700 transition hover:opacity-75">
Blog
</a>
</li>
<li>
<a href="#" class="text-gray-700 transition hover:opacity-75">
Changelog
</a>
</li>
<li>
<a href="#" class="text-gray-700 transition hover:opacity-75">
Status
</a>
</li>
</ul>
</div>
<div class="col-span-2 sm:col-span-1">
<p class="text-sm font-bold text-gray-900 uppercase">Learning</p>
<ul class="mt-6 space-y-4 text-sm">
<li>
<a href="#" class="text-gray-700 transition hover:opacity-75">
Lab
</a>
</li>
<li>
<a href="#" class="text-gray-700 transition hover:opacity-75">
Guides
</a>
</li>
<li>
<a href="#" class="text-gray-700 transition hover:opacity-75">
Resources
</a>
</li>
</ul>
</div>
</div>
<div class="w-full max-w-4xl py-16 mx-auto text-center bg-white">
<h2 class="px-8 mb-8 text-2xl font-semibold text-gray-800 sm:px-0">Can't find what you're looking for?</h2>
<button
class="px-6 py-4 mt-1 text-xs font-bold tracking-wide text-white uppercase transition-none bg-gray-950 hover:bg-black sm:mt-0 sm:w-auto sm:shrink-0">
Contact Us
</button>
</div>
</div>
</section>