JSFiddle - React, Tailwind, and code Playground

by Deborah

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">
<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<script src="js/jquery-1.9.1.min.js"></script>

<script language="javascript">
$(document).ready(function(){
    $("#section-list").hide();  

    $("#section-title").click(function(){
        $("#section-list").toggle();
    });
});
</script>

</head>

<body>
    <!-- container contains HEADER + NAV + CONTENT-->
    <div class="container">

        <!-- header -->
        <div class="header">
            <img id="logo" alt="Logo: Matteo Puccinelli profile" src="img/logoridim.png"> 
        </div>

        <!-- sections -->
        <div class="content">
            <!-- Article: sections -->
            <div class="section">
                <div id="section-title" class="section-title">
                    <h1>
                        Sections
                    </h1>
                </div>
                <div id="section-list">
                    <ul class="nav">
                        <li class="nav"><a href="prova.html">Home</a></li>
                        <li class="nav"><a href="#personaldata">Dati personali</a></li>
                        <li class="nav"><a href="#work">Esperienze lavorative</a></li>
                        <li class="nav"><a href="#education">Educazione</a></li>
                        <li class="nav"><a href="#passions">Passioni</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- content -->
        <div class="content">
            <!-- Article: personal data -->
            <div id="personaldata" class="article">
 ...

CSS

@charset "utf-8";
/* CSS Document */

body
{
    background-color:#FFF;
    font-size:100%;
    font-family:Verdana, Geneva, sans-serif;

}

.centered
{
    margin:0 auto;
}

.centered-content
{
    text-align:center;
}
div.article-header
{

    background-image:url(../img/articleheaderback.png);
    background-position:bottom;
    background-repeat:repeat-x;
    width:100%;
    margin-bottom:10px;


}
div.article-title
{
    width:69%;
    display:inline-block;
    padding-left:1%;
    padding-bottom:10px;
}
div.article-more
{
    text-align:right;
    font-style:italic;
    display:inline-block;
    color:#690000;
    width:29%;
    padding-right:1%;
}
div.article-content
{
    width:94%;
    padding-right:3%;
    padding-left:3%;
}
div.article
{
    padding-top:10px;
    padding-bottom:10px;
    padding-left:3%;
    padding-right:3%;
    width:94%;  
}
div.section
{
    padding-top:10px;
    padding-bottom:10px;
    width:100%;
    text-align:center;
}
div.section-title
{
    text-transform:uppercase;
    width:100%;
}
div.container
{
    width:100%;
    margin:10px 0;
    padding-top:20px;
    padding-bottom:10px;
    background-color:#cbcb63;
}
div.content
{
    width:90%;
    background-color:#fff59b;
    margin:15px auto;
    padding-top:10px;
    padding-bottom:10px;
}

div#contacts
{
    width:90%;
    background-color:#fff59b;
    margin:0 auto;
}
.dark-background
{
    background-color:#1b5e5e;
}
div.header
{
    text-align:center;
    width:100%;
}
div.footer
{
    text-align:center;
}
h1
{
    font-size:1.5em;
    font-weight:bold;
    color:#690000;
}


img#logo
{
    max-width:100%;
}

li.basic
{
    padding-top:5px;
    padding-bottom:5px;
    line-height:1.5;
}

li.nav
{
    color:#5c7304;
    padding-top:25px;
    text-align:center;
    font-weight:bold;
    text-transform:uppercase;
}
li.contacts
{
    display:inline-block;
    width:25%;
}
p
{
    line-height:1.5;
}
ul.nav
{
    margin-top:10px;
    padding:0;
    list-style:none;
   ...