JSFiddle - React, Tailwind, and code Playground

by PATRICK CONRATH

HTML

<!DOCTYPE html >
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>zzzz.com</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
    <link href="style.css" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
 
<body>
    <div id="page">
        <div id="header">
        <div id="logo">
<img src="images/LOGOEQ3.png" width="569" height="210"  alt="logo zzzz"/>
</div>
            
        </div>
        <div id="menu">
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">dfhgdhfgjsdfsdj</a></li>
                <li><a href="#" >dsdgdjgqsjd</a></li>
                <li><a href="#">dfgsjhdgsgfjsdhjdf</a></li>
                <li><a href="#">fsfsfsfsf</a></li>
                <li><a href="#">fgsdfjhgjfsd</a></li>
            </ul>
        </div>
        <div id="main">  
            <div id="sidebar">
                <div id="login">
                 
                    <h2></h2>
                    <div id="cadrel">
                        <form method="post" action="#">
                            <p class="txtleft"><label for="user">Identifiant :</label></p>
                            <input type="text" name="user" id="user" class="text" /><br />
                            <p class="txtleft"><label for="password">Mot de passe :</label></p>
                            <input type="password" name="password" id="password" class="password" /><br />
                            <p class="rem">
                            <input type="checkbox" checked="checked" name="remember" id="remember" />      <label for="remember">Mémoriser</label></p>
                            <input type="submit" name="submit" id="submit" class="submit" value="Entrer" />
                             
                        </form>
                   ...

CSS

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
 
}
 
body {
    padding:0;
    margin:0;
     
    padding-bottom: 30px;
    font: 21px Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    color: #B9B3AD;
    background: #454444 url(images/pattern.jpg) repeat ;
     
}
 
h1 {
    padding: 120px 0 0 30px;
    font: normal 54px Georgia, Times, serif;
    color: #FFFFFF;
}
 
h1 a, h1 a:hover {
    color: #FFFFFF;
    text-decoration: none;
}
 
h2 {
    font-weight: normal;
    text-shadow: -1px 1px 1px #36322F;
     
}
 
p {
    padding: .8em 0;
    line-height: 1.8em;
    text-align: justify;
}
 
 
 
a {
    color: #f4e5e4;
    text-decoration: none;
}
 
a:hover {
    color: #EF5548;
}
 
/* page */
 
#page {
    width: 960px;
    margin: 0 auto;
     
}
 
/* header */
 
#header {
    height: 350px;
    background:   url(images/paris-teifeL3.jpg) no-repeat right top;
    padding-bottom:40px;
 
}
 
/* menu */
 
#menu {
    margin-left:0px;
    height: 210px;
    margin-bottom: -47px;
    margin-top:0px;
    text-align: center;
    background: #454444 url(images/pattern.jpg) repeat ;
}
 
#menu ul {
    list-style: none;
}
 
#menu ul li {
    display: inline;
    font-size: 22px;
    line-height: 60px;
}
 
#menu ul li a {
    padding: 0 10px;
    text-shadow: 6px -4px 4px #c4140a;
    color: #EEEEEE;
}
 
#menu ul li a:hover {
    color: #20ef47;
}
 
/* main */
 
#main {
     
    width: 960px; 
}
 
/* sidebar */
 
#sidebar {
    float: left;
     
    width: 290px;
    font-size: 19px;
     
}
 
 
 #sidebar .box {
    margin-top:70px;
    margin-bottom: 15px;
    padding-bottom: 10px;
     
}
#sidebar .box2 {
    height: 1%;
    background: #3a3b3d  no-repeat top left;
    padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    border-right-style: ridge;
    border-right-color:#606162;
    border-right-width:2px;
    border-left-style:ridge;
    border-left-color:#606162;
   ...