JSFiddle - React, Tailwind, and code Playground

by TastyBytes

HTML

<p class="post-title">This is a post title that is two lines long</p>
<br /><br />
<p class="post-title">This is a post title that is two lines long</p>
<br /><br /><p class="post-title">This is a post title that is two lines long</p>
<br /><br /><p class="post-title">This is a post title that is two lines long</p>
<br /><br /><p class="post-title">This is a post title that is two lines long</p>
<br /><br /><p class="post-title">This is a post title that is two lines long</p>
<br /><br /><p class="post-title">This is a post title that is two lines long</p>
<br /><br /><p class="post-title">This is a post title that is two lines long</p>
<br /><br /><p class="post-title">This is a post title that is two lines long</p>
<br /><br />

CSS

.post-title {
    font: normal normal bold 38px sans-serif;
    color: #fff;
    padding: 10px 30px 10px 30px;
    
}

JavaScript

function rand(x,y) {
    return Math.floor( Math.random()*(y-x+1)+x );
}

function getColor() {
    var r, g, b, colorEnum = rand(0,4);
    
    switch( colorEnum ) {
        case 1: 
            r = rand( 225, 255 );
            g = rand( 0, 100 );
            b = rand( 0, 100 );
            r = 255; g = 44; b = 56;
            break;
        case 2: 
            r = rand( 225, 255 );
            g = rand( 225, 255 );
            b = rand( 0, 100 );
            r = 255; g = 170; b=0;
            break;
        case 3: 
            r = rand( 0, 100 );
            g = rand( 225, 255 );
            b = rand( 0, 100 );
            r = 255; g = 240; b = 64;
            break;
        case 4: 
            r = rand( 0, 50 );
            g = rand( 225, 255 );
            b = rand( 225, 255 );
            r = 103; g = 217; b = 255;
            break;
        case 5: 
            r = rand( 0, 100 );
            g = rand( 0, 100 );
            b = rand( 225, 255 );
            //break;
        case 6: 
            r = rand( 225, 255 );
            g = rand( 0, 100 );
            b = rand( 225, 255 );
            //break;
        case 7: 
            r = rand( 225, 255 );
            g = rand( 125, 175 );
            b = rand( 0, 100 );
            //break;
        case 0:
        default:
            r = g = b = rand ( 200, 240 );
            break;
    }
    return {'r':r, 'g': g, 'b': b};
}    


// More proper framework selecting
tags = document.getElementsByTagName('p');

for( x=0; x < tags.length; x++ ) {
    if ( tags[x].className == "post-title" ) {
        color = getColor();
        tags[x].style.backgroundColor = "rgb("+color.r+","+color.g+","+color.b+")";
    }
}