Hướng dẫn tạo khung thông báo nhiều màu sắc rất đơn giản và đẹp cho bài viết trên blog/web

Hướng dẫn tạo khung thông báo nhiều màu sắc 

 Bước 1: Chép toàn bộ đoạn code bên dưới trước thẻ đóng </style> và lưu lại

.modz-colorbox {
    overflow: hidden;
    position: relative;
    margin: .5rem 0 1rem;
    transition: box-shadow.25 s;
    border-radius: 10px;
    color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    padding: 20px;
    font-size: 16px
}

.modz-colorbox.blue {
    background: #03a9f4
}

.modz-colorbox.green {
    background: #4CAF50
}

.modz-colorbox.red {
    background: #F44336
}

.modz-colorbox.orange {
    background: #ff9800
}

.modz-colorbox.purple {
    background: #673ab7
}

.modz-colorbox.Yellow {
    background: #FDBF14
}



Bước 2: Chèn code bên dưới vào bài viết, nhớ chuyển sang chế độ soạn thảo HTML 
1. Blue

Mod Share: kết nối, học hỏi, thành công!

<p class="modz-colorbox blue">chèn nội dung vào đây</p>
2. Green

Mod Share: kết nối, học hỏi, thành công!

<p class="modz-colorbox green">chèn nội dung vào đây</p>
3. Red

Mod Share: kết nối, học hỏi, thành công!

<p class="modz-colorbox red">chèn nội dung vào đây</p>
4. Orange

Mod Share: kết nối, học hỏi, thành công!

<p class="modz-colorbox orange">chèn nội dung vào đây</p>
5. Purple

Mod Share: kết nối, học hỏi, thành công!

<p class="modz-colorbox purple">chèn nội dung vào đây</p>
6. Yellow

Mod Share: kết nối, học hỏi, thành công!

<p class="modz-colorbox Yellow">chèn nội dung vào đây</p>
Đây là toàn bộ code tạo khung thông báo nhiều màu sắc cho bài viết trong blog/web
Chúc các bạn thành công!