JSFiddle - React, Tailwind, and code Playground

by mxpatel29

HTML

<div id="products"></div>

CSS

body{
    padding: 10px;
    font-family: arial;
}

div{
    padding: 5px;
}

div.name{
    font-size: 1em;
    font-weight: 700;
}

div.price{
    font-size: 1.3em;
    color: green;
}

div.desc{
    font-size: 0.8em;
    color: #777;
}

span.sale{
    font-size: 0.7em;
    color: orange;
}

JavaScript

var chair = {"name": "Chair","price": "$75",
        "desc": "Hardwood dining room chair."};


//Create Lego Components for the chair object above
 var name = $("<div />", {	
    "text": chair.name,
     "class": "name"
 });

 var price = $("<div />", {	
    "text": chair.price,
     "class": "price"
 });

 var desc = $("<div />", {	
    "text": chair.desc,
    "class": "desc"
 });

//Create a new Lego piece for A/B Test
 var sale = $("<span />", {	
    "text": " - limited time offer",
    "class": "sale"
 });

//Basic Example, put together pieces (variant A)
 $("#products").append(name).append(price).append(desc);

//Test for sale (variant B)
var random_num = Math.floor((Math.random()*2)+1);

//add sale info to price for variant
if(random_num == 1)
    $(price).append(sale);