Home
Prajwal Hallale
Horizontal Pricing Card with gradient shadow

Horizontal Pricing Card with gradient shadow

Forked from> @mereani/single-plan-responsive-pricing-card

This tailwind example is contributed by Prajwal Hallale, on 02-May-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Prajwal Hallale

211

Fork Fullscreen

<div class="bg-white rounded-2xl lg:flex lg:max-w-none">
      <div class="p-4 sm:p-8 lg:flex-auto ">
        <h3 class="text-2xl font-bold tracking-tight text-gray-700">
          <strong class="text-black">Free</strong> listing
        </h3>
        <p class="pl-6 mt-4 space-y-2 text-lg text-gray-800">
          To avail this free offer you have to mention EliteAi.tools on any of your social media accounts
          mentioned here (X (formerly
          Twitter), LinkedIn).
        </p>

<div class="mt-10 flex items-center gap-x-4">
          <h4 class="flex-none text-sm font-semibold leading-6 text-blue-600">What’s included</h4>
          <div class="h-px flex-auto bg-gray-100"></div>
        </div>
        <ul class="mt-8 grid grid-cols-1 gap-4 text-sm leading-6 text-gray-600 sm:grid-cols-2 sm:gap-6">
          <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="20" zoomAndPan="magnify"
              viewBox="0 0 30 30.000001" height="20" preserveAspectRatio="xMidYMid meet" version="1.0"
              id="IconChangeColor">
              <defs>
                <clipPath id="id1">
                  <path
                    d="M 2.847656 4.792969 L 26.796875 4.792969 L 26.796875 24.390625 L 2.847656 24.390625 Z M 2.847656 4.792969 "
                    clip-rule="nonzero" id="mainIconPathAttribute" fill="green"></path>
                </clipPath>
              </defs>
              <g clip-path="url(#id1)">
                <path fill="green"
                  d="M 11.078125 24.3125 L 2.847656 15.890625 L 6.128906 12.53125 L 11.078125 17.597656 L 23.519531 4.875 L 26.796875 8.230469 Z M 11.078125 24.3125 "
                  fill-opacity="1" fill-rule="nonzero" id="mainIconPathAttribute"></path>
              </g>
            </svg> <span class="font-bold mx-1">30 days</span><span>boost</span></li>
          <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="20" zoomAndPan="magnify"
              viewBox="0 0 30 30.000001" height="20" preserveAspectRatio="xMidYMid meet" version="1.0"
              id="IconChangeColor">
              <defs>
                <clipPath id="id1">
                  <path
                    d="M 2.847656 4.792969 L 26.796875 4.792969 L 26.796875 24.390625 L 2.847656 24.390625 Z M 2.847656 4.792969 "
                    clip-rule="nonzero" id="mainIconPathAttribute" fill="green"></path>
                </clipPath>
              </defs>
              <g clip-path="url(#id1)">
                <path fill="green"
                  d="M 11.078125 24.3125 L 2.847656 15.890625 L 6.128906 12.53125 L 11.078125 17.597656 L 23.519531 4.875 L 26.796875 8.230469 Z M 11.078125 24.3125 "
                  fill-opacity="1" fill-rule="nonzero" id="mainIconPathAttribute"></path>
              </g>
            </svg>Lifetime trafic</li>
          <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="20" zoomAndPan="magnify"
              viewBox="0 0 30 30.000001" height="20" preserveAspectRatio="xMidYMid meet" version="1.0"
              id="IconChangeColor">
              <defs>
                <clipPath id="id1">
                  <path
                    d="M 2.847656 4.792969 L 26.796875 4.792969 L 26.796875 24.390625 L 2.847656 24.390625 Z M 2.847656 4.792969 "
                    clip-rule="nonzero" id="mainIconPathAttribute" fill="green"></path>
                </clipPath>
              </defs>
              <g clip-path="url(#id1)">
                <path fill="green"
                  d="M 11.078125 24.3125 L 2.847656 15.890625 L 6.128906 12.53125 L 11.078125 17.597656 L 23.519531 4.875 L 26.796875 8.230469 Z M 11.078125 24.3125 "
                  fill-opacity="1" fill-rule="nonzero" id="mainIconPathAttribute"></path>
              </g>
            </svg>Separate landing Page</li>
          <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="20" zoomAndPan="magnify"
              viewBox="0 0 30 30.000001" height="20" preserveAspectRatio="xMidYMid meet" version="1.0"
              id="IconChangeColor">
              <defs>
                <clipPath id="id1">
                  <path
                    d="M 2.847656 4.792969 L 26.796875 4.792969 L 26.796875 24.390625 L 2.847656 24.390625 Z M 2.847656 4.792969 "
                    clip-rule="nonzero" id="mainIconPathAttribute" fill="green"></path>
                </clipPath>
              </defs>
              <g clip-path="url(#id1)">
                <path fill="green"
                  d="M 11.078125 24.3125 L 2.847656 15.890625 L 6.128906 12.53125 L 11.078125 17.597656 L 23.519531 4.875 L 26.796875 8.230469 Z M 11.078125 24.3125 "
                  fill-opacity="1" fill-rule="nonzero" id="mainIconPathAttribute"></path>
              </g>
            </svg>Blog listing</li>
        </ul>
      </div>

<div class="p-2 mt-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
        <div
          class="py-10 text-center rounded-2xl bg-gray-50/50 ring-1 ring-inset ring-gray-500/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
          <div class="max-w-xs px-8 mx-auto min-w-[300px]">
            <p class="text-base font-semibold text-gray-600">One Time</p>
            <p class="flex items-baseline justify-center mt-6 mb-12 gap-x-2">
              <span class="text-5xl font-bold tracking-tight text-gray-900">
                <span class="px-2 line-through">$29</span><span class="italic text-gray-700">FREE*</span></span>
            </p>
            <a href="mailto:admin@eliteai.tools" class="block w-full py-2 my-6 text-white rounded-sm bg-green-600">
              Email Us →
            </a>
            <p class="px-3 py-1 text-base font-bold ">
              Limited time promotional offer
            </p>
          </div>
        </div>
      </div>
    </div>

</div>
</section>

Related Examples

Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Andreas Wagner

1 year ago

13.7k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

5 months ago

838
Minimalist Pricing Section
A minimal but nice pricing section.

Author:
VoltagedDev

1 year ago

1.9k
Pricing Card

Author:
Anonymous

10 months ago

1.2k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

1.8k
Fancy pricing card

Author:
Laurits

2 years ago

13.4k
Pricing section

Author:
Leon Bachmann

2 years ago

11.9k
Pricing Plans UI
A modern, responsive pricing plan cards

Author:
EliteAI Tools

8 months ago

812
Service Pricing Card
Cards including a call-to-action button for signing up

Author:
Paul Intay

1 year ago

2.3k
Pricing section
Service/product pricing section

Author:
Sophia Baker

2 years ago

12.4k
Subscription
Subscription list

Author:
Abhiraj

6 months ago

605
Pricing
Looks better with in [Line-2] with: md:w-3/5

Author:
Matti

9 months ago

946

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components