Get Started ,Membership section - responsive - darkMode

This tailwind example is contributed by ABDO-SY, on 03-Mar-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Card Call to Action

Author ABDO-SY

Tailwind v3.4 1.5k 3

Fork Fullscreen

<section class=" w-full bg-white dark:bg-[#0A2025] py-9 px-8">
  <div class="mx-auto max-w-[1440px] ">
    <h2 class="py-2.5 text-[#0a2025] dark:text-white text-2xl font-bold font-['Roboto']">Keni Membership</h2>
    <div
      class="bg-[#3E9D26] text-center lg:text-left lg:bg-[url('https://iili.io/33CU9ZQ.png')] bg-[length:550px] bg-[position:calc(100%-50px)_center] bg-no-repeat rounded-xl mt-10 p-10">
      <h3 class="text-white text-5xl font-bold font-['Roboto']">BECOME A MEMBER</h3>
      <span class="text-white mt-3 text-xl font-normal font-['Roboto']">Sign up for free. Join the community.</span>
      <div class=" justify-center lg:justify-start items-center mt-10 gap-5 flex">
        <button class="px-8 hover:cursor-pointer py-2.5 bg-white rounded-xl justify-center items-center gap-2.5 flex text-[#3e9d26] text-sm font-semibold font-['Roboto']">Join Us</button><button class="px-8 py-2.5 hover:cursor-pointer bg-white rounded-xl justify-center items-center gap-2.5 flex text-[#3e9d26] text-sm font-semibold font-['Roboto']">Sign In</button>
      </div>
    </div>
  </div>
</section>