JSFiddle - React, Tailwind, and code Playground

by lukempeters

HTML

<h2 class="output"></h2>

CSS

body {
    background: #eeeeff;
}

h2 {
    margin: 30px 40px;
    font-family: Georgia;
    font-size: 28px;
    line-height: 46px;
    font-weight: 100;
    color: #3b3b3b;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
    max-width: 600px;
}

em {
    font-weight: bold;
    font-style: italic;
}

JavaScript

// A simple JavaScript object. It looks similar to a multidimensional array, but it's an object.
var person = {
    name: 'Jack',
    age: 42,
    location: 'Italy',
    sex: 'Male'
};


// A string of HTML combined with pieces of data from the object
var personHtml = 'Hi, my name is <em>' + person.name + '</em> and I am <em>' + person.age + '</em> years old. I am currently living in <em>' + person.location + '</em>. Oh, and by the way, I am a <em>' + person.sex + '</em>. That is important.';

// This puts the string into the page
$('.output').append(personHtml);