JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="fr"> <!--<![endif]-->
<head>
  <meta charset="UTF-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>
        koskoz.Blog    </title>

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <link href='http://fonts.googleapis.com/css?family=Droid+Sans|Vollkorn' rel='stylesheet'>

</head>

<body>

  <div id="container">
    <header id="header">
        <hgroup>
            <h1><a href="http://antoinedescamps.fr">Prénom Nom</a></h1>
            <h2><a href="http://localhost/wordpress">Le blog</a></h2>

        </hgroup>
        
        <ul class="links">
            <li><a href="mailto:contact@antoinedescamps.fr" class="email ir">Email</a></li>
            <li><a href="twitter.com/antoinedescamps" class="twitter ir">Twitter</a></li>
            <li><a href="http://localhost/wordpress/?feed=atom" class="rss ir">RSS</a></li>
        </ul>
    </header>
    
    <aside id="menu">

        <ul>
            <li><a href="#">CSS</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">Wordpress</a></li>

        </ul>
    </aside>
    <section id="main">
        
        <article class="article">
            <header>
                <h1><a href="http://localhost/wordpress/?p=17">No man, I don&#8217;t eat pork</a></h1>
            </header>
            <div class="content">
                <p>The path of the righteous man is beset on all sides by the iniquities of...

CSS

/*
Theme Name: Antoine Descamps Blog v1
Theme URI: 
Author: Antoine Descamps
Author URI: http://antoinedescamps.fr
*/

/* 
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 14px; line-height: 1.231; background: #ededed; }

body, button, input, select, textarea { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #9f0101; color: #fff; text-shadow: none; }
::selection { background: #9f0101; color: #fff; text-shadow: none; }


/*...