JSFiddle - React, Tailwind, and code Playground

by Damien Alves

HTML

<body>
  <div id="blocpage">
    <header>

      <div>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#goal">Our goal</a></li>
            <li><a href="#shows">Shows</a></li>
            <li><a href="#adress">Contact</a></li>
          </ul>
        </nav>
      </div>

    </header>



    <section id="intro">
      <article id="goal">
        <h1>Our goal</h1>
        <P>Circus, this simple word evokes in the memory of all magic, fairy, dream, doesn't it?
          <br/>
          <br/> Of course! In every society and throughout all ages, the circus has carried us through its image into distant lands and has given the smallest as well as the greatest to escape, to dream; to marvel!
          <br/>
          <br/> WILD CIRCUS is the combination of all these adjectives! and promises to make you spend an unforgettable moment. Come to discover in family a spectacle that will amaze young and grownup with numerous acrobatics, taming, trapezists, jugglers,
          clowns; there will be enough for everyone!
          <br/>
          <br/> All our artists will be proud to welcome you to one of the biggest marquees in the world, which has been the emblem of the WILD CIRCUS since its creation in 1967!</P>
      </article>

    </section>


    <section>

      <h1>Shows</h1>
      <article id="shows">
        <img src="http://img15.hostingpics.net/pics/711652irina.png">

        <h2>Trapezist</h2>

        <p>Our artist "Irina" "who comes from the cold of Siberia will make you shiver through her unique acrobatics, rocking contorsions, one-armed rolling, simple board, twists, and many others! All this realized without technical assistance and with the
          the only force of her physique and courage! A performance that you will not forget anytime soon.</p>

      </article>

      <article>
        <img src="http://img15.hostingpics.net/pics/861015lion.png">

        <h2>Taming</h2>

        <p>The "lion king" is how...

CSS

#blocpage {
  width: 1280px;
  margin: auto;
}


/*Corps de la page*/

body {
  background-image: url("http://img15.hostingpics.net/pics/472061fond1.png");
  font-family: arial, Georgia, verdana;
}


/* En tête de la page*/

header {
  background-image: url("http://img15.hostingpics.net/pics/955043WILDCIRCUS.png");
  background-repeat: no-repeat;
  height: 285px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}


/* Menu*/

nav ul {
  list-style-type: none;
  display: flex;
  background-color: rgb(27, 1, 155);
  width: 1237px;
  height: 45px;
  border: 2px solid black;
  justify-content: center;
}

nav li {
  display: flex;
  margin-right: 150px;
  margin-top: 10px;
}

nav a {
  font-size: 1.3em;
  text-decoration: none;
  color: white;
  font-weight: bold;
}


/* 1ere section partie intro*/

#intro {
  display: flex;
  border: 2px black solid;
  border-radius: 10px;
}


/* 2ieme partie section*/

section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 2px;
  background-color: #291CDE;
  padding: 10px;
  border: 2px black solid;
}


/* Titre principale section*/

section h1 {
  font-size: 2em;
  text-align: center;
  border: 3px black solid;
  background-color: black;
  color: white;
}


/*Titre secondaire section*/

section h2 {
  font-family: courier new Comic sans ms;
  font-weight: normal;
  text-transform: uppercase;
  border: 3px black solid;
  color: white;
  background-color: rgb(23, 17, 131)
}


/* paragraphe partie section*/

section p {
  font-family: "Libre Baskerville", verdana;
  color: white;
  font-size: 0.9em;
}


/* Pied de page */

footer {
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #291CDE;
  border: 2px black solid;
  border-radius: 10px;
}


/* Partie Robozzle */

#logo {
  margin: auto;
}

.logo {
  text-align: center;
}


/*Partie lien cliquable*/

footer a {
  text-decoration: none;
  color: black;
 ...

JavaScript

$(document).ready(function() {
  // Add return on top button
  $('body').append('<div id="returnOnTop" title="Back to top">&nbsp;</div>');

  // On button click, let's scroll up to top
  $('#returnOnTop').click(function() {
    $('html,body').animate({
      scrollTop: 0
    }, 'slow');
  });
});

$(window).scroll(function() {
  // If on top fade the bouton out, else fade it in
  if ($(window).scrollTop() == 0)
    $('#returnOnTop').fadeOut();
  else
    $('#returnOnTop').fadeIn();
});