JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<script src="http://www.studiofrancine.be/pika/Coach%20Seduction_files/logo.png"></script>
<body>
<div id="header">
    <header>
        <div class="logo">
            <a href="index.php" title="Accueil"><img src="http://www.studiofrancine.be/pika/Coach%20Seduction_files/logo.png" alt="logo.png"/></a>
        </div>
        <nav>
            <ul>
                <li><a href="index.php">ACCUEIL</a></li>
                <li><a href="temoignages.php">TÉMOIGNAGES</a></li>
                <li><a href="coaching.php">COACHING PERSONNALISÉ</a></li>
                <li><a href="developpement.php">ARTICLES</a></li>
                <li><a href="contact.php">CONTACT</a></li>
            </ul>
        </nav>
        <div class="menu"><span></span></div>
        <div class="display_menu">
            <ul>
                <li><a href="index.php">ACCUEIL</a></li>
                <li><a href="temoignages.php">TÉMOIGNAGES</a></li>
                <li><a href="coaching.php">COACHING PERSONNALISÉ</a></li>
                <li><a href="developpement.php">ARTICLES</a></li>
                <li><a href="contact.php">CONTACT</a></li>
            </ul>
        </div>
    </header>
</div>
</body>

CSS

body {
    margin:0;
}

#header {
    height:200px;
    overflow:hidden;
    position:relative;
}

header {
    background:black;
    -webkit-transform:rotate(-2deg);
    -moz-transform:rotate(-2deg);
    transform:rotate(-2deg);
    height:200px;
    left:-6px;
    right:-10px;
    top:-20px;
    position:absolute;
    display:inline-block;
    color:#fff;
}

.logo {
    float:left;
    margin-left:20px;
    margin-top:50px;
}

.logo img {
    -webkit-transform:rotate(2deg);
    -moz-transform:rotate(2deg);
    transform:rotate(2deg);
    width:100%;
    height:auto;
}

.menu {
    display:none;
}

.display_menu {
    display:none;
}

nav {
    -webkit-transform:rotate(2deg);
    -moz-transform:rotate(2deg);
    transform:rotate(2deg);
    margin-top:70px;
    float:left;
    width:75%;
}

nav ul {
    list-style:none;
}

nav ul li {
    display:inline;
    font-size:100%;
    padding:1%;
}

nav ul li a {
    color:#fff;
    text-decoration:none;
    font-size:100%;
    
    word-wrap:none;
    font-family: Arial, sans-serif;
    border-bottom:transparent 2px solid;
}

nav ul li a:active, nav ul li a:hover {
    border-bottom:#fb9bd7 2px solid;
}