Pricing Table – Three Column Layout – Block Pattern

STARTER

10$ / Monthly

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Buy Now
PREMIUM

30$ / Quarterly

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Buy Now
ขั้นสูง

80$ / Yearly

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Buy Now
Pattern Code
<!-- wp:columns {"align":"wide","style":{"border":{"radius":"10px"},"spacing":{"padding":{"top":"30px","right":"15px","bottom":"30px","left":"15px"}}}} -->
<div class="wp-block-columns alignwide" style="border-radius:10px;padding-top:30px;padding-right:15px;padding-bottom:30px;padding-left:15px"><!-- wp:column {"verticalAlignment":"center","width":"","style":{"color":{"background":"#ffe87800"}},"layout":{"inherit":false}} -->
<div class="wp-block-column is-vertically-aligned-center has-background" style="background-color:#ffe87800"><!-- wp:group {"style":{"border":{"radius":"10px"},"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}},"color":{"gradient":"linear-gradient(90deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)"}}} -->
<div class="wp-block-group has-background" style="background:linear-gradient(90deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);border-radius:10px;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:heading {"textAlign":"center","level":4,"style":{"typography":{"fontSize":"18px","fontStyle":"normal","fontWeight":"700","lineHeight":"1"},"color":{"text":"#172646"}}} -->
<h4 class="has-text-align-center has-text-color" style="color:#172646;font-size:18px;font-style:normal;font-weight:700;line-height:1">STARTER</h4>
<!-- /wp:heading -->

<!-- wp:heading {"textAlign":"center","level":4,"style":{"typography":{"fontSize":"30px"},"color":{"text":"#172646"}}} -->
<h4 class="has-text-align-center has-text-color" style="color:#172646;font-size:30px">10$ / Monthly</h4>
<!-- /wp:heading -->

<!-- wp:list {"style":{"typography":{"fontSize":"16px","lineHeight":1.5},"color":{"text":"#172646"}}} -->
<ul class="has-text-color" style="color:#172646;font-size:16px;line-height:1.5"><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li></ul>
<!-- /wp:list -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"white","style":{"border":{"radius":"10px"},"typography":{"fontSize":"18px"},"spacing":{"padding":{"top":"8px","right":"30px","bottom":"8px","left":"30px"}},"color":{"background":"#172646"}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:18px"><a class="wp-block-button__link has-white-color has-text-color has-background wp-element-button" style="border-radius:10px;background-color:#172646;padding-top:8px;padding-right:30px;padding-bottom:8px;padding-left:30px">Buy Now</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"","style":{"color":{"background":"#ffe87800"}},"layout":{"inherit":false}} -->
<div class="wp-block-column is-vertically-aligned-center has-background" style="background-color:#ffe87800"><!-- wp:group {"style":{"border":{"radius":"10px","width":"2px"},"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}},"color":{"text":"#c8b0ef"}},"backgroundColor":"white"} -->
<div class="wp-block-group has-white-background-color has-text-color has-background" style="border-radius:10px;border-width:2px;color:#c8b0ef;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:heading {"textAlign":"center","level":4,"style":{"typography":{"fontSize":"18px","fontStyle":"normal","fontWeight":"700","lineHeight":"1"},"color":{"text":"#172646"}}} -->
<h4 class="has-text-align-center has-text-color" style="color:#172646;font-size:18px;font-style:normal;font-weight:700;line-height:1">PREMIUM</h4>
<!-- /wp:heading -->

<!-- wp:heading {"textAlign":"center","level":4,"style":{"typography":{"fontSize":"30px"},"color":{"text":"#172646"}}} -->
<h4 class="has-text-align-center has-text-color" style="color:#172646;font-size:30px"><strong>30</strong>$ / Quarterly </h4>
<!-- /wp:heading -->

<!-- wp:list {"style":{"typography":{"fontSize":"16px","lineHeight":1.5},"color":{"text":"#172646"}}} -->
<ul class="has-text-color" style="color:#172646;font-size:16px;line-height:1.5"><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li></ul>
<!-- /wp:list -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#c8b0ef","text":"#172646"},"border":{"radius":"10px"},"typography":{"fontSize":"18px"},"spacing":{"padding":{"top":"8px","right":"30px","bottom":"8px","left":"30px"}}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:18px"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:10px;color:#172646;background-color:#c8b0ef;padding-top:8px;padding-right:30px;padding-bottom:8px;padding-left:30px">Buy Now</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"","style":{"color":{"background":"#ffe87800"}},"layout":{"inherit":false}} -->
<div class="wp-block-column is-vertically-aligned-center has-background" style="background-color:#ffe87800"><!-- wp:group {"style":{"border":{"radius":"10px"},"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}},"color":{"gradient":"linear-gradient(90deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)"}}} -->
<div class="wp-block-group has-background" style="background:linear-gradient(90deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);border-radius:10px;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:heading {"textAlign":"center","level":4,"style":{"typography":{"fontSize":"18px","fontStyle":"normal","fontWeight":"700","lineHeight":"1"},"color":{"text":"#172646"}}} -->
<h4 class="has-text-align-center has-text-color" style="color:#172646;font-size:18px;font-style:normal;font-weight:700;line-height:1">ขั้นสูง</h4>
<!-- /wp:heading -->

<!-- wp:heading {"textAlign":"center","level":4,"style":{"typography":{"fontSize":"30px"},"color":{"text":"#172646"}}} -->
<h4 class="has-text-align-center has-text-color" style="color:#172646;font-size:30px"><strong>80</strong>$ / Yearly</h4>
<!-- /wp:heading -->

<!-- wp:list {"style":{"typography":{"fontSize":"16px","lineHeight":1.5},"color":{"text":"#172646"}}} -->
<ul class="has-text-color" style="color:#172646;font-size:16px;line-height:1.5"><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li><li>Lorem Ipsum</li></ul>
<!-- /wp:list -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"white","style":{"border":{"radius":"10px"},"typography":{"fontSize":"18px"},"spacing":{"padding":{"top":"8px","right":"30px","bottom":"8px","left":"30px"}}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:18px"><a class="wp-block-button__link has-white-color has-text-color wp-element-button" style="border-radius:10px;padding-top:8px;padding-right:30px;padding-bottom:8px;padding-left:30px">Buy Now</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->