system: You are an assistant that generates WordPress patterns.

user: This is a simple info box design.

assistant: <!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"border":{"color":"#e4e6ea","style":"solid","width":"1px"},"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}},"color":{"background":"#3d3d3d"}},"textColor":"white"} -->
<div class="wp-block-column has-border-color has-white-color has-text-color has-background" style="border-color:#e4e6ea;border-style:solid;border-width:1px;background-color:#3d3d3d;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:heading {"textAlign":"center","level":3,"style":{"typography":{"fontSize":"28px","fontStyle":"normal","fontWeight":"700"},"spacing":{"margin":{"bottom":"17px"}}}} -->
<h3 class="has-text-align-center" style="margin-bottom:17px;font-size:28px;font-style:normal;font-weight:700">What to Do</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"16px"}}} -->
<p class="has-text-align-center" style="font-size:16px">Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"white","style":{"typography":{"textTransform":"uppercase","fontSize":"11px"},"spacing":{"padding":{"top":"10px","bottom":"10px","left":"30px","right":"30px"}},"border":{"radius":{"topLeft":"15px","topRight":"0px","bottomLeft":"0px","bottomRight":"15px"}}},"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-font-size is-style-outline" style="font-size:11px;text-transform:uppercase"><a class="wp-block-button__link has-white-color has-text-color wp-element-button" style="border-top-left-radius:15px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:15px;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px">อ่านเพิ่ม</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"border":{"color":"#e4e6ea","style":"solid","width":"1px"},"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}},"color":{"background":"#fee8d7"}},"textColor":"black"} -->
<div class="wp-block-column has-border-color has-black-color has-text-color has-background" style="border-color:#e4e6ea;border-style:solid;border-width:1px;background-color:#fee8d7;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:heading {"textAlign":"center","level":3,"style":{"typography":{"fontSize":"28px","fontStyle":"normal","fontWeight":"700"},"spacing":{"margin":{"bottom":"17px"}}}} -->
<h3 class="has-text-align-center" style="margin-bottom:17px;font-size:28px;font-style:normal;font-weight:700">When to Do</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"16px"}}} -->
<p class="has-text-align-center" style="font-size:16px">Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"white","textColor":"black","style":{"typography":{"textTransform":"uppercase","fontSize":"11px"},"spacing":{"padding":{"top":"10px","bottom":"10px","left":"30px","right":"30px"}},"border":{"radius":{"topLeft":"15px","topRight":"0px","bottomLeft":"0px","bottomRight":"15px"}}},"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-font-size is-style-outline" style="font-size:11px;text-transform:uppercase"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background wp-element-button" href="#" style="border-top-left-radius:15px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:15px;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px" rel="#">อ่านเพิ่ม</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"border":{"color":"#e4e6ea","style":"solid","width":"1px"},"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}},"color":{"background":"#f5f5f5","text":"#242424"}}} -->
<div class="wp-block-column has-border-color has-text-color has-background" style="border-color:#e4e6ea;border-style:solid;border-width:1px;color:#242424;background-color:#f5f5f5;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:heading {"textAlign":"center","level":3,"style":{"typography":{"fontSize":"28px","fontStyle":"normal","fontWeight":"700"},"spacing":{"margin":{"bottom":"17px"}}}} -->
<h3 class="has-text-align-center" style="margin-bottom:17px;font-size:28px;font-style:normal;font-weight:700">How to Do</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"16px"}}} -->
<p class="has-text-align-center" style="font-size:16px">Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"white","style":{"typography":{"textTransform":"uppercase","fontSize":"11px"},"spacing":{"padding":{"top":"10px","bottom":"10px","left":"30px","right":"30px"}},"border":{"radius":{"topLeft":"15px","topRight":"0px","bottomLeft":"0px","bottomRight":"15px"}}},"className":"is-style-fill"} -->
<div class="wp-block-button has-custom-font-size is-style-fill" style="font-size:11px;text-transform:uppercase"><a class="wp-block-button__link has-white-color has-text-color wp-element-button" href="#" style="border-top-left-radius:15px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:15px;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px" rel="#">อ่านเพิ่ม</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->