Rainbow Journal Example

//CSS Style for Rainbow Block

.rainbowB {
    background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%);
    padding: 10px;
    margin: 10px 1%;
    opacity: 0.8;
    border-radius: 10px;
}

.rainbowH {
    background: rgb(238, 238, 238);
    padding: 10px;
    margin: 0px;
    opacity: 0.9;
}

.rainbowH h5 {
    padding: 0px;
    margin: 0px;
    font-size: 200%;
}

.rainbowH .fa-solid.fa-stars {
    background: -webkit-linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rainbowC {
    background: rgb(238, 238, 238);
    padding: 10px;
    margin: 10px 0px 0px 0px;
    opacity: 0.9;
}

//HTML Template for Rainbow Block

<div class="rainbowB">
<div class="rainbowH">
<h5><em class="fa-solid fa-stars">&nbsp;</em> Box Header Here</h5>
</div>
<div class="rainbowC">Box content here.</div>
</div>