JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='background' class='style_1'></div>


<div id='container'>

    <div class='content border_gold2'>
        hhhhhhhhhhhhhhhhhhhhh
        <div class='banner'>aaaaa</div>
    </div>
    
    <div class='content border_gold'>
        <select id='style_select'>
            <option value='1'>Fire</option>
            <option value='2'>Purple</option>
            <option value='3'>Pearl</option>
        </select>
        <button id='style_change'>Change</button>
        
        <div class='banner'>aaaaa</div>
        
    </div>

</div>

CSS

div, img, button, p {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    position: relative;
}

/* Behind everything. Covers full screen. When changing style, add certain class. */
#background {
    z-index: -2;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
}

.style_1 {
    background: linear-gradient(125deg, #A69052, #A64600);
}
.style_2 {
    background: linear-gradient(125deg, #764E8D, #3A1A83);
}
.style_3 {
    background: linear-gradient(125deg, #8F8459, #80B5D4);
}

#container {
    width: 80%;
    margin: 20px auto;
}

.content {
    width: 100%;
    padding: 20px;
    margin: 20px 0;
    background-color: rgba(234, 231, 226, 0.87);
}

.border_gold {
    position: relative;
    box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
}

.border_gold::before {
    /*background: repeating-linear-gradient(125deg, #ffdc82, #dc9941 50px, #ffdc82 150px);*/
    border-radius: 5px;
    
    border-image: repeating-linear-gradient(125deg, #ffdc82, #dc9941 50px, #ffdc82 150px);
    border-image-slice: 1;
    border-style: solid;
    border-width: 5px;
    
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.4);
}


.border_gold2 {
    position: relative;
    border-radius: 10px;
    box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
}

.border_gold2::before {
    /*background: repeating-linear-gradient(125deg, #ffdc82, #dc9941 50px, #ffdc82 150px);*/
    border-image: repeating-linear-gradient(125deg, #ffdc82, #dc9941 50px, #ffdc82 150px);
    border-image-slice: 1;
    border-style: solid;
    border-width: 4px;
    
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.4);
}


.border_gold...

JavaScript

$("#style_change").on("click", function(){
    changeStyle($( "#style_select").val() );
});

function changeStyle(s){
    $("#background").removeClass().addClass("style_" + s);
}