JSFiddle - React, Tailwind, and code Playground

HTML

<p>Padding IS COLORED</p>
<div>Mexican’t professor plum charlie chaplin? Facial accessory lorreto del mar Daniel plainview landed gentry circus strongman sam elliott zap rowsdower, lorreto del mar off-piste frightfully nice mustachio landed gentry Daniel plainview zap rowsdower toothbrush circus strongman boogie nights sam elliott Daniel plainview facial accessory, Daniel plainview man markings boogie nights mr frothy-top sam elliott worn with distinction mustachio zap rowsdower off-piste Daniel plainview toothbrush lorreto del mar frightfully nice wario facial accessory mr frothy-top landed gentry circus strongman prostate cancer? Rock n roll star gunslinger villain marquess of queensbury en time-warped cabbie off-piste graeme souness en time-warped cabbie, cunning like a fox gunslinger dodgy uncle clive villain karl marx marquess of queensbury en time-warped cabbie graeme souness rock n roll star off-piste en time-warped cabbie, rock n roll star lemmy dodgy uncle clive graeme souness professor plum en time-warped cabbie villain gunslinger en time-warped cabbie marquess of queensbury cunning like a fox devilish cad off-piste karl marx. John aldridge basil fawlty landed gentry louis xiii sam elliott brigadier, et sodales cum dick van dyke mouth coiffure louis xiii landed gentry basil fawlty john aldridge stiff upper lip brigadier crumb catcher sam elliott?</div>

CSS

div {
background-image:linear-gradient(to bottom, rgba(41, 44, 49, 1) 0%, rgba(41, 44, 49, 1) 100%), linear-gradient(to bottom, rgba(225, 138, 7, 1) 0%, rgba(225, 44, 49, 1) 100%);
background-clip: content-box, padding-box;
padding: 20px
}
/*used gradients as i don't know of a way to apply mulitple solid colors*/

JavaScript

//Padding color