[Shortcode] Một số shortcode đẹp...

[Shortcode]!
Shortcode là thẻ sử dụng dấu ngoặc vuông [ ] để xác định cách được sử dụng. Mỗi shortcode thực hiện một chức năng cụ thể trong một trang web có thể đơn giản như định dạng nội dung hoặc phức tạp như xác định cấu trúc toàn bộ trang web.

Demo
1. Tạo nội dung Ghi Chú

GHI CHÚ

Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây

 
<div class="content-table">
<div class="text-description">
<h2>
GHI CHÚ</h2>
</div>
<div class="text-post">
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây
Hãy nhập nội dung ghi chú vào đây</div>
</div>
<style>
.content-table {
    margin: 0;
    display: flex;
    -webkit-box-shadow: 0 4px 13px -6px rgba(110,110,110,0);
    -moz-box-shadow: 0 4px 13px -6px rgba(185,185,185,0.45);
    box-shadow: 0 4px 13px -6px rgba(185,185,185,0.45);
}
.content-table .text-description {
    background: -moz-linear-gradient(top,rgba(37,141,200,1) 44%,rgba(115,182,220,1) 64%,rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top,rgba(37,141,200,1) 44%,rgba(115,182,220,1) 64%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,rgba(37,141,200,1) 44%,rgba(115,182,220,1) 64%,rgba(255,255,255,0) 100%);
}
.content-table .text-description, .content-table .text-features, .content-table .text-updates {
    padding: 5px;
    margin: 0 auto;
    white-space: nowrap;
    text-align: center;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-rl;
    transform: scale(-1,-1);
}
.content-table .text-description h2, .content-table .text-features h2, .content-table .text-updates h2 {
    padding: 0;
    margin: 0;
    letter-spacing: 2px;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
}
.content-table .text-post {
    padding: 10px;
    margin: 0;
    background: #fff;
    width: 100%;
}
</style>