Help Center Section Using Tailwind UI
A Help Center Section component created with Tailwind offers a user-friendly and organized platform for users to access resources, FAQs, and support, ensuring a seamless and informative assistance experience.
section
Loading component...
178 lines
<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>
<!-- inspired design by https://dribbble.com/shots/6715463-Maroom-Help-Center -->
<div class="mx-auto bg-[#F8F9FB] max-w-6xl my-10">
<div class="p-10">
<div class="mx-auto text-start">
<div class="col-span-2">
<div>
<h2 class="mb-8 text-2xl font-bold text-gray-800 sm:text-4xl">
How can we help?
</h2>
</div>
</div>
<div class="max-w-xl lg:flex lg:items-end">
<form class="w-full">
<div
class="relative flex items-center w-full h-12 overflow-hidden bg-white rounded-lg focus-within:shadow-lg">
<div class="grid w-12 h-full text-gray-300 place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input class="w-full h-full pr-2 text-sm text-gray-700 outline-none peer" type="text"
id="search" placeholder="Search" />
</div>
</form>
</div>
<nav class="flex flex-wrap gap-4 mt-10">
<a href="#"
class="inline-flex px-3 py-2 text-sm font-bold text-gray-600 uppercase transition-all duration-200 ease-in-out border-b-2 border-transparent whitespace-nowrap hover:border-b-blue-600 hover:text-blue-600">
Lanlord
</a>
<a href="#"
class="inline-flex px-3 py-2 text-sm font-medium text-gray-600 uppercase transition-all duration-200 ease-in-out border-b-2 border-transparent whitespace-nowrap hover:border-b-blue-600 hover:text-blue-600">
Tenatnt </a>
</nav>
</div>
</div>
<div class="grid justify-center w-full grid-cols-2 mx-auto bg-white lg:grid-cols-4 gap-y-8 lg:gap-x-20 p-14">
<div class="col-span-2 sm:col-span-1">
<img class="w-24 mb-6 bg-gray-100 rounded-full shadow-md"
src="https://cdn-icons-png.flaticon.com/128/2723/2723073.png" alt="">
<p class="text-xl font-bold text-gray-900">How to start?</p>
<ul class="mt-8 space-y-4 text-base">
<li>
<a href="#" class="font-medium text-gray-400 transition hover:text-gray-900">
Is my apertement suitable?
</a>
</li>
<li>
<a href="#" class="font-medium text-gray-400 transition hover:text-gray-900">
Who sets the cost?
</a>
</li>
<li>
<a href="#" class="font-medium text-gray-400 transition hover:text-gray-900">
Short term rental?
</a>
</li>
<li>
<a href="#" class="font-medium text-blue-600 transition hover:text-blue-900">
View All
</a>
</li>
</ul>
</div>
<div class="col-span-2 sm:col-span-1">
<img class="w-24 mb-6 bg-gray-100 rounded-full shadow-md"
src="https://cdn-icons-png.flaticon.com/128/5324/5324086.png" alt="">
<p class="text-xl font-bold text-gray-900">Transactions</p>
<ul class="mt-8 space-y-4 text-base">
<li>
<a href="#" class="font-medium text-gray-400 transition hover:text-gray-900">
Payment of rent
</a>
</li>
<li>
<a href="#" class="font-medium text-gray-400 transition hover:text-gray-900">
Tallage
</a>
</li>
<li>
<a href="#" class="font-medium text-gray-400 transition hover:text-gray-900">
Payment of utilities
</a>
</li>
<li>
<a href="#" class="font-medium text-blue-600 transition hover:text-blue-900">
View All
</a>
</li>
</ul>
</div>
<div class="col-span-2 sm:col-span-1">
<img class="w-24 mb-6 bg-gray-100 rounded-full shadow-md"
src="https://cdn-icons-png.flaticon.com/128/3208/3208668.png" alt="">
<p class="text-xl font-bold text-gray-900">Offline</p>
<ul class="mt-8 space-y-4 text-base">
<li>
<a href="#" class="font-medium text-gray-400 transition hover:text-gray-900">
Checking the apertement
</a>
</li>
<li>
<a href="#" class="font-medium text-gray-400 transition hover:text-gray-900">
Iam in another city/country
</a>
</li>
<li>
<a href="#" class="font-medium text-gray-400 transition hover:text-gray-900">
How to prepare an apertement?
</a>
</li>
<li>
<a href="#" class="font-medium text-blue-600 transition hover:text-blue-900">
View All
</a>
</li>
</ul>
</div>
<div class="col-span-2 sm:col-span-1">
<img class="w-24 mb-6 bg-gray-100 rounded-full shadow-md"
src="https://cdn-icons-png.flaticon.com/128/4301/4301588.png" alt="">
<p class="text-xl font-bold text-gray-900">Account</p>
<ul class="mt-8 space-y-4 text-base">
<li>
<a href="#" class="font-medium text-gray-400 transition hover:text-gray-900">
payment history
</a>
</li>
<li>
<a href="#" class="font-medium text-gray-400 transition hover:text-gray-900">
Utility
</a>
</li>
<li>
<a href="#" class="font-medium text-gray-400 transition hover:text-gray-900">
Tenant dossier
</a>
</li>
<li>
<a href="#" class="font-medium text-blue-600 transition hover:text-blue-900">
View All
</a>
</li>
</ul>
</div>
</div>
</div>