A ready to use pricing table block for use with websites and landing pages. Dark styled and beautifully designed pricing table with 3 different plans to choose from.

Dependencies

  • Tailwind CSS
  • FontAwesome
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Tailwind CSS Blocks - Pricing Table 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
    
    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="pricing-table-2 bg-gray-800 py-6 md:py-12">
        <div class="container mx-auto px-4">

            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-3xl md:text-4xl font-medium text-white mb-4 md:mb-6">Pricing Plans</h1>
                <p class="text-gray-500 xl:mx-12">You have 3 plans to choose from for using FWR blocks. Basic blocks are FREE forever. Other premium blocks are also free. You can use it for your personal or commercial projects. Just don't forget to share our website or give attribution.</p>
            </div>

            <div class="pricing-plans lg:flex lg:-mx-4 mt-6 md:mt-12">

                <div class="pricing-plan-wrap lg:w-1/3 my-4 md:my-6">
                    <div class="pricing-plan border-t-4 border-solid border-white bg-white text-center max-w-sm mx-auto hover:border-indigo-600 transition-colors duration-300">
                        <div class="p-6 md:py-8">
                            <h4 class="font-medium leading-tight text-2xl mb-2">Small Business</h4>
                            <p class="text-gray-600">For small projects</p>
                        </div>
                        <div class="pricing-amount bg-indigo-100 p-6 transition-colors duration-300">
                            <div class=""><span class="text-4xl font-semibold">$19</span> /year</div>
                        </div>
                        <div class="p-6">
                            <ul class="leading-loose">
                                <li>Upto 5 uses</li>
                                <li>Max 100 items/month</li>
                                <li>500 queries/month</li>
                                <li>Basic statistics</li>
                                <li>Email Support</li>
                            </ul>
                            <div class="mt-6 py-4">
                                <button class="bg-indigo-600 text-xl text-white py-2 px-6 rounded hover:bg-indigo-700 transition-colors duration-300">Get Started</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="pricing-plan-wrap lg:w-1/3 my-4 md:my-6">
                    <div class="pricing-plan border-t-4 border-solid border-white bg-white text-center max-w-sm mx-auto hover:border-indigo-600 transition-colors duration-300">
                        <div class="p-6 md:py-8">
                            <h4 class="font-medium leading-tight text-2xl mb-2">Professional</h4>
                            <p class="text-gray-600">For large scale projects</p>
                        </div>
                        <div class="pricing-amount bg-indigo-100 p-6 transition-colors duration-300">
                            <div><span class="text-4xl font-semibold">$29</span> /year</div>
                        </div>
                        <div class="p-6">
                            <ul class="leading-loose">
                                <li>Upto 50 uses</li>
                                <li>Max 500 items/month</li>
                                <li>1000 queries/month</li>
                                <li>Full statistics</li>
                                <li>Email Support</li>
                            </ul>
                            <div class="mt-6 py-4">
                                <button class="bg-indigo-600 text-xl text-white py-2 px-6 rounded hover:bg-indigo-700 transition-colors duration-300">Get Started</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="pricing-plan-wrap lg:w-1/3 my-4 md:my-6">
                    <div class="pricing-plan border-t-4 border-solid border-white bg-white text-center max-w-sm mx-auto hover:border-indigo-600 transition-colors duration-300">
                        <div class="p-6 md:py-8">
                            <h4 class="font-medium leading-tight text-2xl mb-2">Power User</h4>
                            <p class="text-gray-600">For multi large scale projects</p>
                        </div>
                        <div class="pricing-amount bg-indigo-100 p-6 transition-colors duration-300">
                            <div class=""><span class="text-4xl font-semibold">$39</span> /year</div>
                        </div>
                        <div class="p-6">
                            <ul class="leading-loose">
                                <li>Unlimited uses</li>
                                <li>Unlimited items/month</li>
                                <li>Unlimited queries/month</li>
                                <li>Full statistics</li>
                                <li>Email &amp; Phone Support</li>
                            </ul>
                            <div class="mt-6 py-4">
                                <button class="bg-indigo-600 text-xl text-white py-2 px-6 rounded hover:bg-indigo-700 transition-colors duration-300">Get Started</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
    <!-- /.pricing-table-2 -->

    <!-- Scripts -->
</body>
</html>
// Variables
$primary: #4c51bf;
$white:   #fff;
$black:   #000;

// Custom CSS
.pricing-plan {
  box-shadow: 0 1px 3px rgba($black,.12), 0 1px 2px rgba($black,.24);
  transition: box-shadow .3s;

  &:hover {
    box-shadow: 0 14px 28px rgba($black,.25), 0 10px 10px rgba($black,0.22);

    .pricing-amount {
      background-color: $primary;
      color: $white;
    }
  }
}


@media (min-width: 768px) {

  .pricing-plan {
    transition: border-color .3s, transform .3s, box-shadow .3s;

    &:hover {
      transform: translateY(-1rem);
    }
  }

}
.pricing-plan {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  -webkit-transition: -webkit-box-shadow .3s;
  transition: -webkit-box-shadow .3s;
  transition: box-shadow .3s;
  transition: box-shadow .3s, -webkit-box-shadow .3s;
}

.pricing-plan:hover {
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
          box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.pricing-plan:hover .pricing-amount {
  background-color: #4c51bf;
  color: #fff;
}

@media (min-width: 768px) {
  .pricing-plan {
    -webkit-transition: border-color .3s, -webkit-transform .3s, -webkit-box-shadow .3s;
    transition: border-color .3s, -webkit-transform .3s, -webkit-box-shadow .3s;
    transition: border-color .3s, transform .3s, box-shadow .3s;
    transition: border-color .3s, transform .3s, box-shadow .3s, -webkit-transform .3s, -webkit-box-shadow .3s;
  }
  .pricing-plan:hover {
    -webkit-transform: translateY(-1rem);
            transform: translateY(-1rem);
  }
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvdGFpbHdpbmRjc3MvcHJpY2luZy10YWJsZS9wcmljaW5nLXRhYmxlLTI=