Categories
tailwindcss Services component with icons
Enhance your website's search engine visibility with our Tailwind CSS Services component. Seamlessly designed with optimized HTML markup and Tailwind CSS, this component enables you to highlight key offerings of your website.
<section>
<div class="sm:p-4 lg:p-11 xl:p-20 2xl:p-52 relative">
<div
class="grid md:grid-cols-12 grid-cols-1 items-center gap-[30px] relative"
>
<div class="lg:col-span-8 md:col-span-12">
<div class="grid grid-cols-1 pb-8">
<h3
class="mb-4 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold"
>
Boost Your SEO with AI-Generated Content
</h3>
<p class="text-slate-400 max-w-xl">
Elevate your SEO campaigns with our expertise in designing and
managing conversion-centric HTML pages using Tailwind CSS v3.x.
</p>
</div>
<!--end grid-->
<div class="grid md:grid-cols-2 grid-cols-1 mt-8 gap-[30px]">
<div
class="px-6 py-10 shadow hover:shadow-md duration-500 rounded-lg hover:bg-white"
>
<i
class="fab fa-searchengin text-4xl bg-gradient-to-tl to-indigo-600 from-red-600 text-transparent bg-clip-text"
></i>
<div class="content mt-7">
<a
href="#"
class="title h5 text-lg font-medium hover:text-indigo-600"
>Keyword Research</a
>
<p class="text-slate-400 mt-3">
Enhance your SEO strategy with advanced keyword analysis and
plagiarism checks.
</p>
<div class="mt-5">
<a
href="#"
class="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-indigo-600 hover:text-indigo-600 after:bg-indigo-600 duration-500 ease-in-out"
>Read More <i class="fas fa-arrow-right"></i
></a>
</div>
</div>
</div>
<div
class="px-6 py-10 shadow hover:shadow-md duration-500 rounded-lg hover:bg-white"
>
<i
class="fas fa-file-alt text-4xl bg-gradient-to-tl to-indigo-600 from-red-600 text-transparent bg-clip-text"
></i>
<div class="content mt-7">
<a
href="#"
class="title h5 text-lg font-medium hover:text-indigo-600"
>Content Optimization</a
>
<p class="text-slate-400 mt-3">
Optimize your content for search engines and improve your
website's visibility.
</p>
<div class="mt-5">
<a
href="#"
class="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-indigo-600 hover:text-indigo-600 after:bg-indigo-600 duration-500 ease-in-out"
>Read More <i class="fas fa-arrow-right"></i
></a>
</div>
</div>
</div>
<div
class="px-6 py-10 shadow hover:shadow-md duration-500 rounded-lg hover:bg-white"
>
<i
class="fas fa-link text-4xl bg-gradient-to-tl to-indigo-600 from-red-600 text-transparent bg-clip-text"
></i>
<div class="content mt-7">
<a
href="#"
class="title h5 text-lg font-medium hover:text-indigo-600"
>Link Building</a
>
<p class="text-slate-400 mt-3">
Strengthen your website's authority and improve search
rankings through strategic link building strategies.
</p>
<div class="mt-5">
<a
href="#"
class="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-indigo-600 hover:text-indigo-600 after:bg-indigo-600 duration-500 ease-in-out"
>Read More <i class="fas fa-arrow-right"></i
></a>
</div>
</div>
</div>
<div
class="px-6 py-10 shadow hover:shadow-md duration-500 rounded-lg hover:bg-white"
>
<i
class="fas fa-chart-bar text-4xl bg-gradient-to-tl to-indigo-600 from-red-600 text-transparent bg-clip-text"
></i>
<div class="content mt-7">
<a
href="#"
class="title h5 text-lg font-medium hover:text-indigo-600"
>SEO Audit</a
>
<p class="text-slate-400 mt-3">
Get insights into your website's SEO performance and receive
actionable recommendations for improvement.
</p>
<div class="mt-5">
<a
href="#"
class="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-indigo-600 hover:text-indigo-600 after:bg-indigo-600 duration-500 ease-in-out"
>Read More <i class="fas fa-arrow-right"></i
></a>
</div>
</div>
</div>
</div>
</div>
<div class="lg:col-span-4 md:col-span-12">
<div
class="grid lg:grid-cols-1 md:grid-cols-2 grid-cols-1 gap-[30px]"
>
<div
class="px-6 py-10 shadow hover:shadow-md duration-500 rounded-lg hover:bg-white"
>
<i
class="fas fa-map-marker-alt text-4xl bg-gradient-to-tl to-indigo-600 from-red-600 text-transparent bg-clip-text"
></i>
<div class="content mt-7">
<a
href="#"
class="title h5 text-lg font-medium hover:text-indigo-600"
>Local SEO</a
>
<p class="text-slate-400 mt-3">
Dominate local search results and attract more customers to
your business.
</p>
<div class="mt-5">
<a
href="#"
class="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-indigo-600 hover:text-indigo-600 after:bg-indigo-600 duration-500 ease-in-out"
>Read More <i class="fas fa-arrow-right"></i
></a>
</div>
</div>
</div>
<div
class="px-6 py-10 shadow hover:shadow-md duration-500-500 rounded-lg hover:bg-white"
>
<i
class="fas fa-chart-line text-4xl bg-gradient-to-tl to-indigo-600 from-red-600 text-transparent bg-clip-text"
></i>
<div class="content mt-7">
<a
href="#"
class="title h5 text-lg font-medium hover:text-indigo-600"
>Content Strategy</a
>
<p class="text-slate-400 mt-3">
Develop a comprehensive content strategy tailored to your
target audience and business goals.
</p>
<div class="mt-5">
<a
href="#"
class="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-indigo-600 hover:text-indigo-600 after:bg-indigo-600 duration-500 ease-in-out"
>Read More <i class="fas fa-arrow-right"></i
></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--grid-->
</div>
</section>
<!--end container-->