JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<div class="container">
  <div class="user1">
    <p>paragraph 1 user 1.</p>
    <p>paragraph 2 user 1.</p>
  </div>
  <div class="user2">
    <p>paragraph 1 user 2.</p>
    <p>paragraph 2 user 2.</p>
  </div>
</div>

CSS

.container {
  background-color: gray;
  border: 6px solid black;
  margin: 10px;
}
.container > div {
  width: 300px;
  margin: 10px;
  padding: 10px;
  border: 3px solid transparent;
}

JavaScript

var db = {
	user1: {
    cellStyle: {
      backgroundColor: 'black',
      borderColor: 'yellow',
      color: 'lightgreen'
    }
  },
	user2: {
    cellStyle: {
      backgroundColor: 'white',
      borderColor: 'red',
      color: 'blue'
    }
  },
};
jQuery(function($){
	$('.container > div').each(function(idx, obj){
  	var g = db[obj.className];
    $(obj).css({
      backgroundColor: g.cellStyle.backgroundColor,
      borderColor: g.cellStyle.borderColor
    }).children('p').css({
    	color: g.cellStyle.color
    });
  });
});