system
You are an assistant that generates WordPress patterns.
user
Phần này có thể được sử dụng để hiển thị giá trong một hộp mẫu, bao gồm hình ảnh và văn bản.
assistant
<!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"style":{"color":{"background":"#222831"},"spacing":{"padding":{"top":"60px","bottom":"60px"}},"border":{"radius":"5px"}}} -->
<div class="wp-block-columns has-background" style="border-radius:5px;background-color:#222831;padding-top:60px;padding-bottom:60px"><!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:spacer {"height":"30px"} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:image {"id":null,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":"5px","color":"#ffd369","width":"2px"}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/a019-jakubk-0512-pepper-on-roastbeef-closeup.jpg?w=1200&amp;h=1200&amp;fit=clip&amp;crop=default&amp;dpr=1&amp;q=75&amp;vib=3&amp;con=3&amp;usm=15&amp;cs=srgb&amp;bg=F4F4F3&amp;ixlib=js-2.2.1&amp;s=95317bbe0fb7c9ead43282b01ac92812" alt="" class="has-border-color" style="border-color:#ffd369;border-width:2px;border-radius:5px" /></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"textAlign":"center","style":{"typography":{"textTransform":"capitalize","fontSize":"34px","fontStyle":"normal","fontWeight":"600","letterSpacing":"2px"},"color":{"text":"#ffd369"}}} -->
<h2 class="has-text-align-center has-text-color" style="color:#ffd369;font-size:34px;font-style:normal;font-weight:600;letter-spacing:2px;text-transform:capitalize">Trải nghiệm hương vị đích thực</h2>
<!-- /wp:heading -->

<!-- wp:spacer {"height":"15px"} -->
<div style="height:15px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"style":{"typography":{"fontSize":"24px","fontStyle":"normal","fontWeight":"600","textTransform":"capitalize","letterSpacing":"2px"},"color":{"text":"#eeeeee"}}} -->
<h2 class="has-text-color" style="color:#eeeeee;font-size:24px;font-style:normal;font-weight:600;letter-spacing:2px;text-transform:capitalize">Nunc et vulputate</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"left","style":{"color":{"text":"#faf3e3"},"typography":{"fontSize":"15px"}}} -->
<p class="has-text-align-left has-text-color" style="color:#faf3e3;font-size:15px">Phasellus sit amet nunc id eros dapibus posuere a aliquet magna.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"18%"} -->
<div class="wp-block-column" style="flex-basis:18%"><!-- wp:spacer {"height":"1px"} -->
<div style="height:1px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"textAlign":"right","style":{"typography":{"fontStyle":"normal","fontWeight":"600","textTransform":"uppercase","fontSize":"44px"},"color":{"text":"#ffd369"}}} -->
<h2 class="has-text-align-right has-text-color" style="color:#ffd369;font-size:44px;font-style:normal;font-weight:600;text-transform:uppercase">$25</h2>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"style":{"typography":{"fontSize":"24px","fontStyle":"normal","fontWeight":"600","textTransform":"capitalize","letterSpacing":"2px"},"color":{"text":"#eeeeee"}}} -->
<h2 class="has-text-color" style="color:#eeeeee;font-size:24px;font-style:normal;font-weight:600;letter-spacing:2px;text-transform:capitalize">Phasellus tincidunt</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"#faf3e3"},"typography":{"fontSize":"15px"}}} -->
<p class="has-text-color" style="color:#faf3e3;font-size:15px">Phasellus sit amet. Maecenas scelerisque interdum lobortis.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"18%"} -->
<div class="wp-block-column" style="flex-basis:18%"><!-- wp:spacer {"height":"1px"} -->
<div style="height:1px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"textAlign":"right","style":{"typography":{"fontStyle":"normal","fontWeight":"600","textTransform":"uppercase","fontSize":"44px"},"color":{"text":"#ffd369"}}} -->
<h2 class="has-text-align-right has-text-color" style="color:#ffd369;font-size:44px;font-style:normal;font-weight:600;text-transform:uppercase">$34</h2>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"style":{"typography":{"fontSize":"24px","fontStyle":"normal","fontWeight":"600","textTransform":"capitalize","letterSpacing":"2px"},"color":{"text":"#eeeeee"}}} -->
<h2 class="has-text-color" style="color:#eeeeee;font-size:24px;font-style:normal;font-weight:600;letter-spacing:2px;text-transform:capitalize">Maecenas vehicula</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"#faf3e3"},"typography":{"fontSize":"15px"}}} -->
<p class="has-text-color" style="color:#faf3e3;font-size:15px">Phasellus sit nunc id eros dapibus pos a scelerisque interdum lobortis.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"18%"} -->
<div class="wp-block-column" style="flex-basis:18%"><!-- wp:spacer {"height":"1px"} -->
<div style="height:1px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"textAlign":"right","style":{"typography":{"fontStyle":"normal","fontWeight":"600","textTransform":"uppercase","fontSize":"44px"},"color":{"text":"#ffd369"}}} -->
<h2 class="has-text-align-right has-text-color" style="color:#ffd369;font-size:44px;font-style:normal;font-weight:600;text-transform:uppercase">$50</h2>
<!-- /wp:heading --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"40px"} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->