Layout Feature - Tailwind Component
Example of Our Team section using Tailwind CSS.
layout
Loading component...
60 lines
<div class="px-12 mx-auto bg-gradient-to-r from-gray-100 to-gray-300">
<section class="py-12 px-4 text-center">
<div class="w-full max-w-2xl text-left">
<h1 class="text-5xl leading-tight font-bold"> Integrations <br> built right in.</h1>
<p class="mt-6 text-gray-600 text-xl leading-relaxed">Connect one to the No Code tools you already know and love,
like Airtable, Zaiper, Stripe and more</p>
<button
class=" my-6 py-2 px-8 border-2 rounded-full hover:text-gray-200 hover:bg-green-700 border-green-700">Request
Access</button>
</div>
</section>
<hr class="border border-gray-300">
<section class="p-4">
<div class="flex flex-wrap text-center">
<div class="md:w-1/2 py-4 md:px-10 mb-4 md:mb-0"><img class="mx-auto mb-3 w-12"
src="https://cdn-icons-png.flaticon.com/128/7005/7005825.png" alt="">
<h3 class="text-2xl mb-3 font-heading text-gray-800 font-medium">Design with case.</h3>
<p class="text-gray-500 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate quo
dolorem, ducimus suscipit consequatur unde.</p>
</div>
<div class="md:w-1/2 py-4 md:px-10 mb-4 md:mb-0 md:border-l"><img class="mx-auto mb-3 w-12"
src="https://cdn-icons-png.flaticon.com/128/1055/1055646.png" alt="">
<h3 class="text-2xl mb-3 font-heading text-gray-800 font-medium">One click launch.</h3>
<p class="text-gray-500 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate quo
dolorem, ducimus suscipit consequatur unde.</p>
</div>
</div>
</section>
<hr class="border border-gray-300">
<section class="py-8 px-4">
<div class="flex flex-wrap -mx-4 -mb-6">
<div class="lg:w-1/3 px-4 mb-6"><img class="w-12 mb-2"
src="https://cdn-icons-png.flaticon.com/128/2916/2916103.png" alt="">
<h3 class="text-2xl mb-3 font-heading text-gray-800 font-medium">Earn money.</h3>
<p class="text-gray-500 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate quo
dolorem, ducimus suscipit consequatur unde.</p>
</div>
<div class="lg:w-1/3 px-4 mb-6 "><img class="w-12 mb-2"
src="https://cdn-icons-png.flaticon.com/128/2190/2190552.png" alt="">
<h3 class="text-2xl mb-3 font-heading text-gray-800 font-medium">Need something.</h3>
<p class="text-gray-500 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate quo
dolorem, ducimus suscipit consequatur unde.</p>
</div>
<div class="lg:w-1/3 px-4 mb-6"><img class="w-12 mb-2"
src="https://cdn-icons-png.flaticon.com/128/1159/1159283.png" alt="">
<h3 class="text-2xl mb-3 font-heading text-gray-800 font-medium">You own the code</h3>
<p class="text-gray-500 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate quo
dolorem, ducimus suscipit consequatur unde.</p>
</div>
</div>
</section>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
</style>