JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
<script src="http://www.modernizr.com/downloads/modernizr-2.0.6.js"></script>
<!doctype html>
<html>
    <head>
        <!--[if lt IE 9]>
            <style type="text/css">
                html.no-multiplebgs{
                    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#6a657c, endColorstr=#666666);
                }
        /*                .no-textshadow h1{
                  filter: DropShadow(Color=#aaaaaa, OffX=-2, OffY=-2, Positive=1);
        } */
            </style>
        <![endif]-->
    </head>
    <body>
        
        <div id="container">
        <h1>CORSO CSS3</h1>
        
        <section>
            <article>
                <p>
Le specifiche CSS hanno, negli anni, rafforzato il proprio ruolo da protagonista nella scena dello sviluppo web. Con il termine CSS3 si indicano ormai un set di proprietà più vaste rispetto a quelle elencate dalla specifica, come ad esempio il @font-face, ma accomunate dal loro crescente supporto nei browsers moderni.

Bordi arrotondati, ombre, font custom e background multipli sono alcuni dei temi che verranno affrontati e illustrati durante questo corso. Ogni proprietà verrà trattata attraverso alcuni esempi ed esercizi.
                </p><p>
L'obiettivo di questo percorso formativo non si vuole però limitare ad una elencazione dei temi legati al tema CSS3 ma anche alle modalità di gestione di una loro implementazione nel mondo reale. Per questo, particolare attenzione sarà riservata ad analizzare le contromisure necessarie nel caso in cui il browser dell'utente non supporti alcune 
                    di queste proprietà.</p>
                <div class="clear"></div>
            </article>
        </section>
        </div>
    </body>
</html>

CSS

@import url(http://fonts.googleapis.com/css?family=Holtwood+One+SC);
@import url(http://fonts.googleapis.com/css?family=Questrial);


html{
    min-height: 100%;
}

.multiplebgs body{
    background-image: radial-gradient(50% 0%, rgba(255,255,255, 0.3), rgba(255,255,255,0.1) 200px, rgba(255,255,255,0) 300px), 
                      linear-gradient(top,  rgba(200,200,200,0.5), rgba(30,30,30,0.9)),
                      linear-gradient(left, hsla(200,50%,50%,0.9),  hsla(300,50%,50%,0.9)),
                      url(http://sandropaganotti.com/wp-content/goodies/courses/CorsoCSS3/assets/noise.jpg);
    
}

html.no-multiplebgs{
    background: rgb(106,101,124);
}

.no-multiplebgs body{
    height: 100%;
    background: url(http://sandropaganotti.com/wp-content/goodies/courses/CorsoCSS3/assets/light.png) no-repeat top center;
}

#container{
    width: 800px;
    margin: 0px auto;
}

h1{
   margin: 0px 0px;
   text-align:center; 
   font-size: 100px;
   color:  rgba(106,101,124, 0.8);
   font-family: 'Holtwood One SC', serif;
   text-shadow: 2px 2px 1px rgba(0,0,0,0.5), -2px -2px 1px rgba(255,255,255,0.5);
}

.no-textshadow h1{
   color: rgb(25,25,29);
}

.csscolumns article{
    margin: 10px 0px;
    column-width: 150px;
    column-gap: 20px;
}

.no-csscolumns article{
    margin: 10px 0px;    
}

.no-csscolumns article p{
    width: 380px;
    float: left;
    padding-right: 20px;
}

article p{
    margin: 10px 0px;
    font-family: 'Questrial', sans-serif;
    font-size: 15px;
    line-height: 17px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
}

.csscolumns article p:first-of-type{
    margin-top: 0px;
}

.clear{
    clear:both;
}