Desktop design

Tablet design

Mobile design

Tech book club landing page

<h1 class="lg:text-[3.875rem] leading-[120%] tracking-[-0.125rem] text-[2.375rem] font-bold text-gradient">
            Join the ultimate tech book club
          </h1>

<h2 class="text-center text-[3.13rem] font-semibold leading-[120%] tracking-[-4%] text-[#062630] p-16">
          Your tech reading journey
        </h2>

<p class="text-[#062630] font-semibold text-[1.13rem] leading-[130%] tracking-[-1%]">
              Attend exclusive meetups
            </p>

<h2 class="text-[2.13rem] tracking-[-0.13rem] mt-[3.75rem] text-[#062630] leading-[130%] lg:text-center">
        Membership options
      </h2>

<h3 class="text-[1.5rem] tracking-[-0.06rem] text-[#062630] leading-[110%] mb-6">
            Starter
          </h3>

<p class="text-[1.25rem] text-[#385159] tracking-[-0.3rem] leading-[140%]">
            <span class="text-[2.13rem] tracking-[-0.13rem] text-[#062630] leading-[130%] font-semibold">$19</span>/month
          </p>

<p class="text-[1.25rem] text-[#385159] tracking-[-0.3rem] leading-[140%]">
            <span class="text-[2.13rem] tracking-[-0.13rem] text-[#062630] leading-[130%] font-semibold">$29</span>/month
          </p>

<h3 class="text-[1.5rem] tracking-[-0.06rem] text-[#062630] leading-[110%] mb-6">
            Enterprise
          </h3>

<p class="text-[2.13rem] tracking-[-0.13rem] text-[#062630] leading-[130%] font-semibold">
            Custom
          </p>

n">  <img src="assets/images/logo.svg" class="mb-[3rem] self-start">

>  <img src="assets/images/image-hero-desktop.webp" class="mt-[4.648rem] rounded-lg lg:mt-0 lg:max-w-[33rem] z-10 w-full self-center">

Design comparison

Please log in to post a comment

Responsive tech book club landing page W/ TailwindCSS

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community