JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.9.0-build-66/ractive.min.js"></script>
<script src="https://rawgit.com/databank/ractive-ago/master/js/ractive-ago.js"></script>
<div id='container'></div>
<script id='template' type='text/ractive'>

  <p>Hi, my name is {{name}}</p>
  
  <p>I was born <ago class="age" timestamp="{{born}}" /> ago, in a world you may not understand.</p>
  
  <p>
  		I published this
      <ago style="font-weight: bold;" timestamp="{{published}}"/> ago, 
      this means I may have survived the global warming.
  </p>
  <br>
</script>

CSS

body {font-family: sans-serif}
.age {
  display: inline-block;
  background-color: lightgreen;
  border: 1px solid green;
  padding: 3px;
}

JavaScript

var ractive = new Ractive({
	el: '#container',
	template: '#template',
  data: {
  	name: 'Adrian',
    born: new Date('1982-03-20').getTime(),
    published: new Date().getTime() - (1000*30),
    
  }
})