JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

span{
 display: block;  
 border: 1px solid red;    
}

JavaScript

var data =     [{
        "id": "299", // <-- v.id
        "calendar_id": "49", // <-- v.id.calendar_id
        "event_date": "2012-11-27", // <-- v.event_date
        "event_start": "2012-11-27 00:39:00", // <-- v.event_start
        "event_end": "2012-11-27 00:39:00", // <-- v.event_end
        "title": "description goes here", // <-- v.title
        "description": "", // <-- v.description
        "planned": "0", // <-- v.planned
        "type_class": "General", // <-- v.type_class
        "type_data": "{\"frequency_type\":\"1\",\"frequency_x\":null,\"type\":\"14\",\"status\":\"23\"}"
    },{
        "id": "300", // <-- v.id
        "calendar_id": "49", // <-- v.id.calendar_id
        "event_date": "2012-11-27", // <-- v.event_date
        "event_start": "2012-11-27 00:39:00", // <-- v.event_start
        "event_end": "2012-11-27 00:39:00", // <-- v.event_end
        "title": "Second Title", // <-- v.title
        "description": "", // <-- v.description
        "planned": "0", // <-- v.planned
        "type_class": "General", // <-- v.type_class
        "type_data": "{\"frequency_type\":\"1\",\"frequency_x\":null,\"type\":\"14\",\"status\":\"23\"}"
    }];
var out = '';
$.each(data,function(k,v){
    out += '<span>'+v.title+'</span>';
    out += '<span>'+v.planned+'</span>';
});

$('div').append(out);