JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" href="http://sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio2/css/frontend.css">
<!doctype html>
<html>
<head>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <title>Edit - Il Blog di HTML.it</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <link rel="stylesheet" href="http://sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio2/css/default.css" type="text/css">
    <![endif]-->
</head>
<body>
    <div id="container">
        <header>
            <hgroup>
                <h1>edit</h1>
                <h2>il blog di HTML.it</h2>
            </hgroup>
            <nav id="menu_primo_livello">
                <ul>
                    <li><a href="/">HTML.it</a></li>
                    <li><a href="/oneBlog">oneBlog</a></li>
                    <li><a href="/HTML-XHTML">HTML/XHTML</a></li>
                    <li><a href="/css">CSS</a></li>
                    <li><a href="/Javascript">JavaScript</a></li>
                    <li><a href="/PHP">PHP</a></li>
                    <li><a href="/Grafica">Grafica</a></li>
                    <li><a href="/webdesign">Web Design</a></li>
                    <li><a href="/marketing-e-motori">Marketing e Motori</a></li>
                    <li><a href="/programmazione">Programmazione</a></li>
                </ul>
                <div class="clear"></div>
            </nav>
        </header>
        <aside id="ultime_news">
            <img src="http://sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio2/img/ultime_news.jpg" class="segnaposto">
        </aside>
        <section id="contenuto_principale">
           <article class="blog_post">
               <header>
                   <h1><a href="#">Usare le variabili personalizzate in Google...

CSS

/* MENU DI PRIMO LIVELLO */
#menu_primo_livello{
 background: #678226;  
 font-family: verdana, arial, helvetica, sans-serif;  
 font-size: 10px;
 font-weight:;
}

#menu_primo_livello ul{
  display:block;
  border-top: 2px solid #BEEB36; 
  border-bottom: 2px solid #000000; 
}

#menu_primo_livello li{
  display:inline; 
  border-right: 2px solid #FFF;  
}

#menu_primo_livello li a{
    color: #fff;
    line-height: 20px;
    padding: 0 5px;
    text-decoration: none;
}

/* TITOLO E SOTTOTITOLO */
#container > header > hgroup{
    font-family: verdana, arial, helvetica, sans-serif;
    background: url(http://sandropaganotti.com/wp-content/goodies/courses/HTML5/esempio2/img/header_no_text.jpg) no-repeat top left
    
}

#container > header > hgroup h1{
    font-size: 60px;
    color: #fff;
    font-weight: 900;
    letter-spacing: -3px;
    text-shadow: 0px 1px 3px #ddd;
    padding: 10px 0px 0px 85px; 
}

#container > header > hgroup h2{
    color:   #BEEB36; 
    font-weight: 900; 
    font-size: 11px;
    margin: -10px 0px 0px 150px;
    padding-bottom: 5px;
    letter-spacing: 0px;
    text-shadow: 0px 1px 0px #000;
}

#container > header > hgroup h1:before{
    content: '<';
    font-size: 40px;
}
#container > header > hgroup h1:after{
    content: '>';
    font-size: 40px;
}

.clear{
    clear: both;
}
    
@media screen and (max-width: 480px){
    
    #container{
        width: auto;
    }

    #ultime_news{
        display:none;
    }
    #strumenti_e_correlati{
        display:none;
    }
    #container{
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }
    
    #container > header > hgroup{
        background: #678226;
        padding-left: 5px; 
    }

    #container > header > hgroup h1, #container > header > hgroup h2,
    #container > header > hgroup h1:before, #container > header > hgroup h1:after{
        font-size: 13px;
        letter-spacing: normal;
        display: inline;
        margin: 0px;
   ...