Contact Help Section Using Tailwind UI
A Contact Help section designed with Tailwind offers a user-friendly and visually appealing space for users to reach out for assistance or support, ensuring a seamless and accessible communication channel.
section
Loading component...
141 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>
<!-- Component Inspired design by https://coastpay.com/contact/ -->
<div class="mx-auto bg-white">
<section class="my-12 mt-24 ml-6 md:my-20 md:mt-40 sm:ml-20">
<div class="container">
<div class="space-y-4">
<h1 class="text-5xl font-bold xl:text-6xl">Let’s talk</h1>
<div class="text-2xl font-medium">
<p>support or have a question about Coast? We’re here to help.</p>
</div>
</div>
</div>
</section>
<section class="mx-4 mt-12 mb-20 md:mb-32 md:mt-20 sm:ml-10">
<div class="container">
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
<a href=""
class="block p-8 transition-all duration-200 ease-in-out bg-gray-200 rounded-md hover:shadow group hover:bg-blue-600 md:p-4 lg:p-8 xl:p-12">
<div class="flex justify-end">
<div class="w-12 h-12 md:h-20 md:w-20">
<img alt="help" loading="lazy" width="120" height="135" decoding="async"
src="https://coastpay.com/_next/image/?url=https%3A%2F%2Fcoastpayprd.wpengine.com%2Fwp-content%2Fuploads%2F2021%2F06%2Fhelp.png&w=128&q=75" />
</div>
</div>
<div class="mt-2">
<h3 class="mb-2 text-3xl font-bold md:text-4xl">Get help</h3>
<div class="max-w-sm text-lg font-medium">
<p>Speak to our team today and ask anything about Coast.</p>
</div>
<div class="mt-6">
<span
class="px-6 py-2.5 bg-blue-600 group-hover:bg-black text-white rounded font-medium">Get
info</span>
</div>
</div>
</a>
<a href="#"
class="block p-8 transition-all duration-200 ease-in-out bg-gray-200 rounded-md group hover:shadow hover:bg-blue-600 md:p-12">
<div class="flex justify-end">
<div class="w-12 h-12 md:h-20 md:w-20">
<img alt="help" loading="lazy" width="120" height="135" decoding="async"
src="https://coastpay.com/_next/image/?url=https%3A%2F%2Fcoastpayprd.wpengine.com%2Fwp-content%2Fuploads%2F2021%2F06%2Ftry.png&w=256&q=75" />
</div>
</div>
<div class="mt-2">
<h3 class="mb-2 text-3xl font-bold md:text-4xl">Try Coast</h3>
<div class="max-w-sm text-lg font-medium">
<p>
See how Coast can help your business by getting early access.
</p>
</div>
<div class="mt-6">
<span
class="px-6 py-2.5 bg-blue-600 group-hover:bg-black text-white rounded font-medium">Get
started</span>
</div>
</div>
</a>
</div>
<div class="grid grid-cols-1 gap-6 mt-6 lg:grid-cols-2 xl:grid-cols-3">
<a href="#"
class="block p-8 transition-all duration-200 ease-in-out bg-gray-200 rounded-md group hover:shadow hover:bg-blue-600 md:p-4 lg:p-8 xl:p-12">
<div class="flex justify-end">
<div class="w-12 h-12 md:h-16 md:w-16">
<img alt="help" loading="lazy" width="120" height="135" decoding="async"
src="https://coastpay.com/_next/image/?url=https%3A%2F%2Fcoastpayprd.wpengine.com%2Fwp-content%2Fuploads%2F2021%2F06%2Fsales.png&w=256&q=75" />
</div>
</div>
<div class="mt-2 md:mt-10">
<h3 class="mb-2 text-3xl font-bold lg:text-4xl">Contact Sales</h3>
<div class="max-w-sm text-lg font-medium">
<p>Speak to someone from our sales team today.</p>
</div>
<div class="mt-6">
<span
class="px-6 py-2.5 bg-blue-600 group-hover:bg-black text-white rounded font-medium">Contact
Sales</span>
</div>
</div>
</a>
<a href="#"
class="block p-8 transition-all duration-200 ease-in-out bg-gray-200 rounded-md group hover:shadow hover:bg-blue-600 md:p-4 lg:p-8 xl:p-12">
<div class="flex justify-end">
<div class="w-12 h-12 md:h-16 md:w-16">
<img alt="help" loading="lazy" width="120" height="135" decoding="async"
src="https://coastpay.com/_next/image/?url=https%3A%2F%2Fcoastpayprd.wpengine.com%2Fwp-content%2Fuploads%2F2021%2F06%2Fquestion.png&w=128&q=75" />
</div>
</div>
<div class="mt-2 md:mt-10">
<h3 class="mb-2 text-3xl font-bold lg:text-4xl">Have a question?</h3>
<div class="max-w-sm text-lg font-medium">
<p>See our frequently asked <br> questions.</p>
</div>
<div class="mt-6">
<span
class="px-6 py-2.5 bg-blue-600 group-hover:bg-black text-white rounded font-medium">Get
Answers</span>
</div>
</div>
</a>
<a href="#"
class="block p-8 transition-all duration-200 ease-in-out bg-gray-200 rounded-md group hover:shadow hover:bg-blue-600 md:p-4 lg:p-8 xl:p-12">
<div class="flex justify-end">
<div class="w-12 h-12 md:h-16 md:w-16">
<img alt="help" loading="lazy" width="120" height="135" decoding="async"
src="https://coastpay.com/_next/image/?url=https%3A%2F%2Fcoastpayprd.wpengine.com%2Fwp-content%2Fuploads%2F2021%2F06%2Fpress.png&w=256&q=75" />
</div>
</div>
<div class="mt-2 md:mt-10">
<h3 class="mb-2 text-3xl font-bold lg:text-4xl">Press & Media</h3>
<div class="max-w-sm text-lg font-medium">
<p>Get in touch with our PR team <br> today.</p>
</div>
<div class="mt-6">
<span
class="px-6 py-2.5 bg-blue-600 group-hover:bg-black text-white rounded font-medium">Press
Contact</span>
</div>
</div>
</a>
</div>
</div>
</section>
</div>