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

112

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 Card with gradient background
A sleek and transparent card displaying your product's pricing. It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

Author:
Computer guy

1 year ago

6.6k
Pricing section

Author:
Leon Bachmann

1 year ago

10.8k
Pricing card

Author:
Sophia Baker

1 year ago

7.1k
Pricing cards pair

Author:
Samuel Dawson

1 year ago

8.9k
3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

7 months ago

1.7k
Pricing card with CTA

Author:
Laurits

1 year ago

8.3k
Pricing section
Pricing table with 3 cards for 3 plans

Author:
Leon Bachmann

1 year ago

9.6k
Pricing cards
pricing section with 3 cards

Author:
Noob

2 years ago

9.7k
Pricing card for subscription

Author:
Task Master

1 year ago

8.8k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 month ago

178
Tiered Pricing Blocks
An organized way to compare different product offerings or pricing tiers. Users can quickly assess the features and pricing for various products.

Author:
Mereani Waqa

11 months ago

6.9k
Subscription Plan Section
Clean and modern Subscription Plan section

Author:
Nikolai

6 months ago

993

Explore components by Tags

Didn't find component you were looking for?

Search from 1600+ componenent