WickedBlocks ©

Pricing.

6 Blocks

Displaying your prices on your website helps attract the kind of customers you want. You may think that your potential audience will go to a cheaper competitor, but often that's not the case. By displaying your prices, you're making it clear who you're targeting.

1 

        <section class="text-gray-700 body-font">
            <div class="container px-8 pt-24 mx-auto lg:px-4">
                <div class="flex flex-wrap text-center">
                    <div class="px-8 py-6 mx-auto lg:px-24 lg:w-2/4 md:w-full">
                        <div class="flex flex-col items-center justify-center h-48 px-2 text-center">
                            <h2
                                class="flex items-center justify-center mt-2 mb-4 text-3xl font-bold leading-none text-blue-800 lg:text-6xl">
                                $38
                                <span class="ml-1 text-base text-gray-600">/mo</span>
                            </h2>
                        </div>
                        <p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
                            Distillery
                            hexagon disrupt edison bulbche.</p>
                        <button
                            class="flex items-center px-4 py-2 mx-auto mt-auto font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 hover:-translate-y-1 hover:scale-110 focus:shadow-outline focus:outline-none">
                            Action
                        </button>
                    </div>
                </div>
            </div>
        </section>

WICKEDTEMPLATES
"Free & premium Well designed landing pages to integrate with your next project."

Have a look to Wicked Templates.
2 

        <section class="text-gray-700 body-font">
            <div class="container px-8 pt-24 mx-auto lg:px-4">
                <div class="flex flex-wrap text-center">
                    <div class="px-8 py-6 mx-auto lg:px-24 lg:w-2/4 md:w-full">
                        <div class="flex flex-col items-center justify-center h-48 px-2 text-center">
                                    <h3 class="tracking-widest">START</h3>
                            <h2
                                class="flex items-center justify-center mt-2 mb-4 text-3xl font-bold leading-none text-blue-800 lg:text-6xl">
                                $8
                                <span class="ml-1 text-base text-gray-600">/mo</span>
                            </h2>
                        </div>
                        <p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
                            Distillery
                            hexagon disrupt edison bulbche.</p>
                        <button
                            class="flex items-center px-4 py-2 mx-auto mt-auto font-semibold text-black duration-500 ease-in-out transform bg-white border rounded-lg shadow-xl transittion hover:text-white hover:bg-black hover:border-black focus:shadow-outline focus:outline-none">
                            Action
                        </button>
                    </div>
                    <div class="px-8 py-6 mx-auto lg:px-24 lg:w-2/4 md:w-full">
                        <div class="flex flex-col items-center justify-center h-48 px-2 text-center">
                                    <h3 class="tracking-widest">PRO</h3>
                            <h2
                                class="flex items-center justify-center mt-2 mb-4 text-3xl font-bold leading-none text-blue-800 lg:text-6xl">
                                $38
                                <span class="ml-1 text-base text-gray-600">/mo</span>
                            </h2>
                        </div>
                        <p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
                            Distillery
                            hexagon disrupt edison bulbche.</p>
                        <button
                            class="flex items-center px-4 py-2 mx-auto mt-auto font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 hover:-translate-y-1 hover:scale-110 focus:shadow-outline focus:outline-none">
                            Action
                        </button>
                    </div>
                </div>
            </div>
        </section>
3 

        <section class="text-gray-700 body-font">
            <div class="container px-8 pt-32 mx-auto lg:px-4">
                <div class="flex flex-wrap text-center">
                    <div class="px-8 py-6 mx-auto lg:px-20 lg:w-1/3 md:w-full">
                        <h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> User 1
                        </h2>
                        <p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
                            Distillery
                            hexagon disrupt edison bulbche.</p>
                        <div class="flex flex-col items-center justify-center px-2 text-center lg:h-32">
                            <h3 class="tracking-widest">START</h3>
                            <h2
                                class="flex items-center justify-center mt-2 mb-4 text-3xl font-bold leading-none text-blue-800 lg:text-6xl">
                                $8
                                <span class="ml-1 text-base text-gray-600">/mo</span>
                            </h2>
                        </div>
                        <button
                            class="flex items-center px-4 py-2 mx-auto mt-auto font-semibold text-black duration-500 ease-in-out transform bg-white border rounded-lg shadow-xl transittion hover:text-white hover:bg-black hover:border-black focus:shadow-outline focus:outline-none">
                            Action
                        </button>
                    </div>
                    <div class="px-8 py-6 mx-auto lg:px-20 lg:w-1/3 md:w-full">
                        <h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> User 2
                        </h2>
                        <p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
                            Distillery
                            hexagon disrupt edison bulbche.</p>
                        <div class="flex flex-col items-center justify-center px-2 text-center lg:h-32">
                            <h3 class="tracking-widest">START</h3>
                            <h2
                                class="flex items-center justify-center mt-2 mb-4 text-3xl font-bold leading-none text-blue-800 lg:text-6xl">
                                $16
                                <span class="ml-1 text-base text-gray-600">/mo</span>
                            </h2>
                        </div>
                        <button
                            class="flex items-center px-4 py-2 mx-auto mt-auto font-semibold text-black duration-500 ease-in-out transform bg-white border rounded-lg shadow-xl transittion hover:text-white hover:bg-black hover:border-black focus:shadow-outline focus:outline-none">
                            Action
                        </button>
                    </div>
                    <div class="px-8 py-6 mx-auto lg:px-20 lg:w-1/3 md:w-full">
                        <h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> User 3
                        </h2>
                        <p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
                            Distillery
                            hexagon disrupt edison bulbche.</p>
                        <div class="flex flex-col items-center justify-center px-2 text-center lg:h-32">
                            <h3 class="tracking-widest">PRO</h3>
                            <h2
                                class="flex items-center justify-center mt-2 mb-4 text-3xl font-bold leading-none text-blue-800 lg:text-6xl">
                                $38
                                <span class="ml-1 text-base text-gray-600">/mo</span>
                            </h2>
                        </div>
                        <button
                            class="flex items-center px-4 py-2 mx-auto mt-auto font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 hover:-translate-y-1 hover:scale-110 focus:shadow-outline focus:outline-none">
                            Action
                        </button>
                    </div>
                </div>
            </div>
        </section>
4 

        <section class="text-gray-700 body-font">
            <div class="container px-8 pt-8 mx-auto lg:px-48">
                <div class="flex flex-wrap ">
                    <div class="px-8 py-6 mx-auto lg:px-10 lg:w-1/2 md:w-full">
                        <div class="h-full px-4 py-6 border rounded-xl">
                            <svg class="w-10 h-10 mb-4 ml-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                width="34" height="24" fill="currentColor">
                                <path fill="none" d="M0 0h24v24H0z" />
                                <path
                                    d="M5.68 7.314l-1.82 5.914L12 19.442l8.14-6.214-1.82-5.914L16.643 11H7.356L5.681 7.314zM15.357 9l2.888-6.354a.4.4 0 0 1 .747.048l3.367 10.945a.5.5 0 0 1-.174.544L12 21.958 1.816 14.183a.5.5 0 0 1-.174-.544L5.009 2.694a.4.4 0 0 1 .747-.048L8.644 9h6.712z" />
                            </svg>
                            <h3 class="tracking-widest">START</h3>
                            <h2
                                class="flex items-center justify-start mt-2 mb-4 text-3xl font-bold leading-none text-left text-blue-800 lg:text-6xl">
                                $8
                                <span class="ml-1 text-base text-gray-600">/mo</span>
                            </h2>
                            <p class="mb-4 text-base leading-relaxed">Tailwind CSS templates
                                with a wicked design.
                                Professionally designed and 100% responsive static templates for startups and personal
                                use.</p>
                            <p class="flex items-center mb-2 text-gray-600">
                                <span
                                    class="inline-flex items-center justify-center flex-shrink-0 w-4 h-4 mr-2 text-white bg-gray-500 rounded-full">
                                    <svg fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
                                        <path d="M20 6L9 17l-5-5"></path>
                                    </svg>
                                </span>Feature 1
                            </p>
                            <p class="flex items-center mb-2 text-gray-600">
                                <span
                                    class="inline-flex items-center justify-center flex-shrink-0 w-4 h-4 mr-2 text-white bg-gray-500 rounded-full">
                                    <svg fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
                                        <path d="M20 6L9 17l-5-5"></path>
                                    </svg>
                                </span>Feature 2
                            </p>
                            <button
                                class="items-end w-full px-8 py-2 mt-12 font-semibold text-black transition duration-500 ease-in-out transform bg-white border rounded-lg shadow-xl hover:text-white focus:shadow-outline focus:outline-none hover:bg-black hoveer:border-black">
                                Action
                            </button>
                        </div>
                    </div>
                    <div class="px-8 py-6 mx-auto lg:px-10 lg:w-1/2 md:w-full">
                        <div class="h-full px-4 py-6 border rounded-xl">
                            <svg class="w-10 h-10 mb-4 ml-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                width="18" height="18" fill="currentColor">
                                <path fill="none" d="M0 0h24v24H0z" />
                                <path
                                    d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zM11 13H4v6h7v-6zm9 0h-7v6h7v-6zm-9-8H4v6h7V5zm9 0h-7v6h7V5z" />
                            </svg>
                            <h3 class="tracking-widest">PRO</h3>
                            <h2
                                class="flex items-center justify-start mt-2 mb-4 text-3xl font-bold leading-none text-left text-blue-800 lg:text-6xl">
                                $38
                                <span class="ml-1 text-base text-gray-600">/mo</span>
                            </h2>
                            <p class="mb-4 text-base leading-relaxed">Tailwind CSS templates
                                with a wicked design.
                                Professionally designed and 100% responsive static templates for startups and personal
                                use.</p>
                            <p class="flex items-center mb-2 text-gray-600">
                                <span
                                    class="inline-flex items-center justify-center flex-shrink-0 w-4 h-4 mr-2 text-white bg-gray-500 rounded-full">
                                    <svg fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
                                        <path d="M20 6L9 17l-5-5"></path>
                                    </svg>
                                </span>Feature 1
                            </p>
                            <p class="flex items-center mb-2 text-gray-600">
                                <span
                                    class="inline-flex items-center justify-center flex-shrink-0 w-4 h-4 mr-2 text-white bg-gray-500 rounded-full">
                                    <svg fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
                                        <path d="M20 6L9 17l-5-5"></path>
                                    </svg>
                                </span>Feature 2
                            </p>
                            <p class="flex items-center mb-6 text-gray-600">
                                <span
                                    class="inline-flex items-center justify-center flex-shrink-0 w-4 h-4 mr-2 text-white bg-gray-500 rounded-full">
                                    <svg fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
                                        <path d="M20 6L9 17l-5-5"></path>
                                    </svg>
                                </span>Feature 3
                            </p>
                            <button
                                class="w-full px-8 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">Button</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
5 

        <section class="text-gray-700 body-font">
            <div class="container px-8 pt-2 mx-auto lg:px-10">
                <div class="flex flex-wrap ">
                    <div class="px-2 py-2 lg:w-1/3 md:w-full">
                        <div class="border rounded-xl">
                            <img class="object-cover object-center w-full h-64 mb-6 rounded-t-xl"
                                src="https://dummyimage.com/420x200/94a3b8/ffffff" alt="content">
                            <div class="p-6 ">
                                <h2
                                    class="flex items-center justify-start mt-2 mb-4 text-3xl font-bold leading-none text-left text-blue-800 lg:text-6xl">
                                    $8
                                    <span class="ml-1 text-base text-gray-600">/mo</span>
                                </h2>
                                <h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Bundle
                                    1
                                </h2>
                                <p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit
                                    waistcoat.
                                    Distillery
                                    hexagon disrupt edison bulbche.</p>
                                <button
                                    class="w-full px-8 py-2 font-semibold text-black transition duration-500 ease-in-out transform bg-white border rounded-lg shadow-xl hover:text-white hover:border-black hover:bg-black focus:shadow-outline focus:outline-none">Button</button>
                            </div>
                        </div>
                    </div>
                    <div class="px-2 py-2 lg:w-1/3 md:w-full">
                        <div class="border rounded-xl">
                            <img class="object-cover object-center w-full h-64 mb-6 rounded-t-xl"
                                src="https://dummyimage.com/420x200/94a3b8/ffffff" alt="content">
                            <div class="p-6 ">
                                <h2
                                    class="flex items-center justify-start mt-2 mb-4 text-3xl font-bold leading-none text-left text-blue-800 lg:text-6xl">
                                    $18
                                    <span class="ml-1 text-base text-gray-600">/mo</span>
                                </h2>
                                <h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Bundle
                                    2
                                </h2>
                                <p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit
                                    waistcoat.
                                    Distillery
                                    hexagon disrupt edison bulbche.</p>
                                <button
                                    class="w-full px-8 py-2 font-semibold text-black transition duration-500 ease-in-out transform bg-white border rounded-lg shadow-xl hover:text-white hover:border-black hover:bg-black focus:shadow-outline focus:outline-none">Button</button>
                            </div>
                        </div>
                    </div>
                    <div class="px-2 py-2 lg:w-1/3 md:w-full">
                        <div class="border rounded-xl">
                            <img class="object-cover object-center w-full h-64 mb-6 rounded-t-xl"
                                src="https://dummyimage.com/420x200/94a3b8/ffffff" alt="content">
                            <div class="p-6 ">
                                <h2
                                    class="flex items-center justify-start mt-2 mb-4 text-3xl font-bold leading-none text-left text-blue-800 lg:text-6xl">
                                    $38
                                    <span class="ml-1 text-base text-gray-600">/mo</span>
                                </h2>
                                <h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Bundle
                                    3
                                </h2>
                                <p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit
                                    waistcoat.
                                    Distillery
                                    hexagon disrupt edison bulbche.</p>
                                <button
                                    class="w-full px-8 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">Button</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
6 

        <section class="text-gray-700 body-font">
            <div class="container px-8 pt-32 mx-auto lg:px-4">
                <div class="flex flex-wrap text-center">
                    <div class="px-2 py-6 mx-auto lg:w-1/4 md:w-full">
                        <div class="p-4 border rounded-xl">
                        <h2 class="mb-3 text-lg font-bold text-blue-700 lg:text-4xl title-font"> User 1
                        </h2>
                        <p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
                            Distillery
                            hexagon disrupt edison bulbche.</p>
                        <div class="flex flex-col items-center justify-center px-2 text-center lg:h-32">
                            <h3 class="tracking-widest">BEGGINER</h3>
                            <h2
                                class="flex items-center justify-center mt-2 mb-4 text-3xl font-bold leading-none text-blue-800 lg:text-6xl">
                                $0
                                <span class="ml-1 text-base text-gray-600">/mo</span>
                            </h2>
                        </div>
                        <button
                            class="flex items-center px-4 py-2 mx-auto mt-auto font-semibold text-black duration-500 ease-in-out transform bg-white border rounded-lg shadow-xl transittion hover:text-white hover:bg-black hover:border-black focus:shadow-outline focus:outline-none">
                            Action
                        </button>
                        </div>
                    </div>
                    <div class="px-2 py-6 mx-auto lg:w-1/4 md:w-full">
                                                <div class="p-4 border rounded-xl">
                        <h2 class="mb-3 text-lg font-bold text-blue-700 lg:text-4xl title-font"> User 2
                        </h2>
                        <p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
                            Distillery
                            hexagon disrupt edison bulbche.</p>
                        <div class="flex flex-col items-center justify-center px-2 text-center lg:h-32">
                            <h3 class="tracking-widest">HOBBY</h3>
                            <h2
                                class="flex items-center justify-center mt-2 mb-4 text-3xl font-bold leading-none text-blue-800 lg:text-6xl">
                                $6
                                <span class="ml-1 text-base text-gray-600">/mo</span>
                            </h2>
                        </div>
                        <button
                            class="flex items-center px-4 py-2 mx-auto mt-auto font-semibold text-black duration-500 ease-in-out transform bg-white border rounded-lg shadow-xl transittion hover:text-white hover:bg-black hover:border-black focus:shadow-outline focus:outline-none">
                            Action
                        </button>
                        </div>
                    </div>
                    <div class="px-2 py-6 mx-auto lg:w-1/4 md:w-full">
                        <div class="p-4 border rounded-xl">
                        <h2 class="mb-3 text-lg font-bold text-blue-700 lg:text-4xl title-font"> User 3
                        </h2>
                        <p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
                            Distillery
                            hexagon disrupt edison bulbche.</p>
                        <div class="flex flex-col items-center justify-center px-2 text-center lg:h-32">
                            <h3 class="tracking-widest">STARTUP</h3>
                            <h2
                                class="flex items-center justify-center mt-2 mb-4 text-3xl font-bold leading-none text-blue-800 lg:text-6xl">
                                $28
                                <span class="ml-1 text-base text-gray-600">/mo</span>
                            </h2>
                        </div>
                        <button
                            class="flex items-center px-4 py-2 mx-auto mt-auto font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 hover:-translate-y-1 hover:scale-110 focus:shadow-outline focus:outline-none">
                            Action
                        </button>
                        </div>
                    </div>
                    <div class="px-2 py-6 mx-auto lg:w-1/4 md:w-full">
                                                <div class="p-4 border rounded-xl">
                        <h2 class="mb-3 text-lg font-bold text-blue-700 lg:text-4xl title-font"> User 4
                        </h2>
                        <p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
                            Distillery
                            hexagon disrupt edison bulbche.</p>
                        <div class="flex flex-col items-center justify-center px-2 text-center lg:h-32">
                            <h3 class="tracking-widest">CORPORATE</h3>
                            <h2
                                class="flex items-center justify-center mt-2 mb-4 text-3xl font-bold leading-none text-blue-800 lg:text-6xl">
                                $38
                                <span class="ml-1 text-base text-gray-600">/mo</span>
                            </h2>
                        </div>
                        <button
                            class="flex items-center px-4 py-2 mx-auto mt-auto font-semibold text-black duration-500 ease-in-out transform bg-white border rounded-lg shadow-xl transittion hover:text-white hover:bg-black hover:border-black focus:shadow-outline focus:outline-none">
                            Action
                        </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>