JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div 
    class="button" 
    data-title="jotain" 
    data-timestamp="7,3,2013,16,00"
>
    Lorem ipsum
</div>
<div class="content">Content</div>

<div 
    class="button" 
    data-title="jotain_muuta" 
    data-timestamp="20,5,2013,16,20"
>
    Lorem ipsum
</div>
<div class="content">Content</div>

CSS

.button {
    background: #e1e1e1;
    width: 300px;
    height: 60px;
    line-height: 60px;
    text-indent: 20px;
    border: 1px solid #999;
    border-radius: 10px;
    margin: 3px;
}

.button span {
    text-indent: 0px;
    border-radius: 300px;
    height: 20px;
    width: 20px;
    font-size: 17px;
    line-height: 20px;
    color: #e1e1e1;
    background: red;
    float: right;
    text-align: center;
}

.content {
    display: none;
}

JavaScript

/*!
 * jQuery Cookie Plugin v1.3.1
 * https://github.com/carhartl/jquery-cookie
 *
 * Copyright 2013 Klaus Hartl
 * Released under the MIT license
 */
(function (factory) {
	if (typeof define === 'function' && define.amd) {
		// AMD. Register as anonymous module.
		define(['jquery'], factory);
	} else {
		// Browser globals.
		factory(jQuery);
	}
}(function ($) {

	var pluses = /\+/g;

	function raw(s) {
		return s;
	}

	function decoded(s) {
		return decodeURIComponent(s.replace(pluses, ' '));
	}

	function converted(s) {
		if (s.indexOf('"') === 0) {
			// This is a quoted cookie as according to RFC2068, unescape
			s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
		}
		try {
			return config.json ? JSON.parse(s) : s;
		} catch(er) {}
	}

	var config = $.cookie = function (key, value, options) {

		// write
		if (value !== undefined) {
			options = $.extend({}, config.defaults, options);

			if (typeof options.expires === 'number') {
				var days = options.expires, t = options.expires = new Date();
				t.setDate(t.getDate() + days);
			}

			value = config.json ? JSON.stringify(value) : String(value);

			return (document.cookie = [
				config.raw ? key : encodeURIComponent(key),
				'=',
				config.raw ? value : encodeURIComponent(value),
				options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
				options.path    ? '; path=' + options.path : '',
				options.domain  ? '; domain=' + options.domain : '',
				options.secure  ? '; secure' : ''
			].join(''));
		}

		// read
		var decode = config.raw ? raw : decoded;
		var cookies = document.cookie.split('; ');
		var result = key ? undefined : {};
		for (var i = 0, l = cookies.length; i < l; i++) {
			var parts = cookies[i].split('=');
			var name = decode(parts.shift());
			var cookie = decode(parts.join('='));

			if (key && key === name) {
				result = converted(cookie);
				break;
			}

			if (!key) {
				result[name] =...