Home
AKASH GANDHAR
Tailwind Pricing Section 2

Tailwind Pricing Section 2

Fully Responsive Pricing Section

This tailwind example is contributed by AKASH GANDHAR, on 11-Aug-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Header Hero

Author AKASH GANDHAR

1.4k

Fork Fullscreen

<div class="flex lg:flex-row flex-col lg:justify-center items-center lg:p-8 p-4 font-sans bg-slate-100 min-h-screen">
  <div class="lg:w-[23rem] bg-white w-full border-2 lg:border-r-0 border-gray-200 p-5 rounded-2xl lg:rounded-r-none">
    <div class="pb-3 mb-4 border-b border-gray-200">
      <div class="text-xs text-slate-800 mb-2">START</div>
      <h2 class="text-5xl m-0 font-normal">Free</h2>
    </div>
    <div class="flex items-center mb-2">
      <svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
      </svg>10k Visitors/mo
    </div>
    <div class="flex items-center mb-2">
      <svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
      </svg>
      10 Funnels, 50 Pages
    </div>
    <div class="flex items-center mb-5">
      <svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
      </svg>Unlimited Transactions
    </div>
    <div class="mt-auto w-full">
      <button class="bg-white rounded-xl cursor-pointer text-white py-2 border-none w-full flex items-center px-3">
        Get Free
        <svg class="ml-auto" width="24" height="24" fill="none" viewBox="0 0 24 24">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.75 6.75L19.25 12L13.75 17.25"></path>
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 12H4.75"></path>
        </svg>
      </button>
      <div class="text-xs mt-3 text-slate-600 line-height-2">Literally you probably haven't heard of them jean shorts.</div>
    </div>
  </div>
  <div class="lg:w-[23rem] bg-white w-full lg:my-0 my-4 border-2 border-gray-200 p-5 rounded-2xl lg:shadow-8">
    <div class="pb-3 mb-4 border-b border-gray-200">
      <div class="text-xs text-slate-800 mb-2">PRO</div>
      <div class="flex items-center">
        <h2 class="text-5xl m-0 font-normal">$38</h2>
        <span class="text-slate-300 ml-1">/mo</span>
      </div>
    </div>
    <div class="flex items-center mb-2">
      <svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
      </svg>10k Visitors/mo
    </div>
    <div class="flex items-center mb-2">
      <svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
      </svg>
      10 Funnels, 100 Pages
    </div>
    <div class="flex items-center mb-2">
      <svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
      </svg>Unlimited Transactions

</div>
    <div class="flex items-center mb-2">
      <svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
      </svg>Analytics
    </div>
    <div class="flex items-center mb-5">
      <svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
      </svg>lnstegrations
    </div>
    <div class="mt-auto w-full">
      <button class="bg-teal-500 rounded-xl cursor-pointer text-white py-2 border-none w-full flex items-center px-3">
        Get Pro
        <svg class="ml-auto" width="24" height="24" fill="none" viewBox="0 0 24 24">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.75 6.75L19.25 12L13.75 17.25"></path>
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 12H4.75"></path>
        </svg>
      </button>
      <div class="text-xs mt-3 text-slate-600 line-height-2">Literally you probably haven't heard of them jean shorts.</div>
    </div>
  </div>
  <div class="lg:w-[23rem] bg-white w-full border-2 lg:border-l-0 border-gray-200 p-5 rounded-2xl lg:rounded-l-none">
    <div class="pb-3 mb-4 border-b border-gray-200">
      <div class="text-xs text-slate-800 mb-2">ENTERPRISE</div>
      <div class="flex items-center">
        <h2 class="text-5xl m-0 font-normal">$72</h2>
        <span class="text-slate-300 ml-1">/mo</span>
      </div>
    </div>
    <div class="flex items-center mb-2">
      <svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
      </svg>Audience Date
    </div>
    <div class="flex items-center mb-2">
      <svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
      </svg>
      Premium templates
    </div>
    <div class="flex items-center mb-5">
      <svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path>
      </svg>White Labelling
    </div>
    <div class="mt-auto w-full">
      <button class="bg-white rounded-xl cursor-pointer text-white py-2 border-none w-full flex items-center px-3">
        Get Enterprise
        <svg class="ml-auto" width="24" height="24" fill="none" viewBox="0 0 24 24">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.75 6.75L19.25 12L13.75 17.25"></path>
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 12H4.75"></path>
        </svg>
      </button>
      <div class="text-xs mt-3 text-slate-600 line-height-2">Literally you probably haven't heard of them jean shorts.</div>
    </div>
  </div>
</div>

Related Examples