JSFiddle - React, Tailwind, and code Playground

by alirokni

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr" id="modernizr-com" class="no-js">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="Robots" content="index,follow" />
    <meta name="description" content="The professional site, information about my interests; design and development since 1999" />
    <meta name="author" content="Ali Mehran Rokni" />
    <meta name="keywords" content="Ali, ali, Mehran, mehran, Rokni, rokni, html, css, javascript, web page, web developer, web development, rokni.com" />
    <meta name="Copyright" content="content of rokni.com is licensed under a Creative Commons Attribution 3.0 License" />
    <title>Rokni.com; the professional site of Ali M. Rokni</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
 
<link rel="stylesheet" href="http://www.rokni.com/style/mainstyle-201214.css" media="screen" />
<link rel="Shortcut Icon" href="http://www.rokni.com/favicon.ico" type="image/x-icon" />

<link rel="author" href="/humans.txt" />

    <!--script src="http://www.rokni.com/js/modernizr-1.6.min.js"></script-->

  </head>

  <body>

    <header class="vcard">
      <h1 class="header fn">Ali Mehran Rokni</h1>
      <h2 class="tagline">The professional site, information about my interests; design and development since 1999 <a href="#tocontent" accesskey="0" class="skip-nav">Skip navigation</a>
   <span class="hide email">[email protected]</span></h2>
 	</header>
 	
 	<nav>
  		<ul id="nav">
			<script type="text/html" id="nav-data">
				<% _.each(navItems, function(item,key,list){ %>
 					<li class="listItem"><a href="<%= item.href %>" class="navigation<%= key == 0 ? ' selected' : '' %>" title="<%= item.title %>" ><%= item.text %></a></li>
				<% }); %>
			</script>  
		</ul>
	</nav>	 	
	
	<article class="billboard">
		<p class="boilerplate" id="tocontent"><strong>Rokni.com</strong> is a platform enabling <span...

JavaScript

var items = [{
  "tabs": "03/08",
  "datetime": "2008-03-01",
  "calendar": "March 2008",
  "content": "For long time, I wanted to overhaul the site. Now, I&#39;m planning to code it with PHP and MySQL, revamp its underlying CSS and JavaScript, including DOM scripting and asynchronous call, as needed, and finally some mash-ups; although, this may take a while.<a href=\"032208/\" class=\"more\" title=\"JustASneakPick\">take a look</a>"
}, {
  "tabs": "10/09",
  "datetime": "2009-10-01",
  "calendar": "October 2009",
  "content": "Time for site re-design has come. So, with help of jQuery, CSS3 and some minor content updates, implementation of new enhancements are underway."
}, {
  "tabs": "10/10",
  "datetime": "2010-10-01",
  "calendar": "October 2010",
  "content": "The site is changing to use HTML5, more CSS3 and probably AJAX for functionality. Its progress depends on finding a balance between maintenance and layout. Also, I have an eye on tablets and smartphones for this iteration."
}, {
  "tabs": "06/11",
  "datetime": "2011-06-01",
  "calendar": "June 2011",
  "content": "As more capable browsers are introduced, the site shall continue its progress for implementing HTML5, CSS3, AJAX and PHP functionalities while degrade nicely for older browsers."
}, {
  "tabs": "09/16",
  "datetime": "2016-09-31",
  "calendar": "September 2016",
  "content": "Rokni.com was neglected for too long. Lots of web standards and specification have been changed and now time has come for another update to the site style and functionality."
}];
var navItems = [{
  "href": "/",
  "title": "rokni.com homepage",
  "text": "Home",
}, {
  "href": "career/",
  "title": "Ali&#39;s resume",
  "text": "Career",
}, {
  "href": "https://alirokni.github.io/projects/",
  "title": "Source code",
  "text": "Github Projects",
}, {
  "href": "contact/",
  "title": "Give Ali some feedback",
  "text": "Contact",
}, {
  "href": "https://alirokni.github.io/",
  "title": "Github Posts",
  "text": "My...