JSFiddle - React, Tailwind, and code Playground

by Damien Alves

HTML

<div class="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>
		
		<div class="item"><img src="https://img4.hostingpics.net/pics/851349Sanstitre1.png" alt="cirque"></div>
		
		<section>
			
			<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>
			
			<h1>Shows</h1>
			
			<article id="shows" , class="aju"><img src="http://img15.hostingpics.net/pics/861015lion.png">
				<div class="texte_trp">
					<h2>Taming</h2>
					<p>The "lion king" is how Pierrot Lafougère is called, his nickname comes from his mastery of the training of Lion and Lioness, only tamer in the world to be in the "cage" facing 18 Lions! One of the only ones to lie down UNDER the kings of the jungle, unique!
					</p>
				</div>
			</article>
			
			<article class="aju"><img src="http://img15.hostingpics.net/pics/711652irina.png">
				<div class="texte_trp">
					
					<h2>Trapezist</h2>
					<p>Our artist "Irina" "who comes from the cold of Siberia will make you shiver through her unique acrobatics, rocking contorsions,...

CSS

.blocpage {
	width: 1000px;
	margin: 0 auto;
}


/*Corps de la page*/

body {
	background-color: rgb(178, 140, 89);
	font-family: arial, Georgia, verdana;
}


/* En tête de la page*/

header {
	background-image: url("https://img4.hostingpics.net/pics/967510WILDCIRCUS1.png");
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 1000px;
}

header div {
	min-width: 100%;
}


/* Menu*/

.item {
	height: 285px;
}

nav ul {
	list-style-type: none;
	display: flex;
	background-color: rgb(46, 178, 255);
	height: 50px;
	justify-content: center;
	margin: 0px;
}

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

nav a {
	font-size: 1.4em;
	text-decoration: none;
	color: rgb(178, 89, 82);
	font-weight: bold;
}


/* 1ere partie section*/

section {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: rgb(178, 89, 82);
	padding: 10px;
}


/* Titre principale section*/

section h1 {
	font-size: 2.5em;
	text-align: center;
	border-top: 3px solid rgb(46, 178, 255);
	border-bottom: 3px solid rgb(46, 178, 255);
	color: rgb(255, 153, 156);
}


/*Titre secondaire section*/

section h2 {
	font-family: courier new Comic sans ms;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 1.5em;
	border-top: 2px solid rgb(46, 178, 255);
	border-bottom: 2px solid rgb(46, 178, 255);
	color: rgb(255, 153, 156);
}


/* paragraphe partie section*/

section p {
	font-family: "Libre Baskerville", verdana;
	color: rgb(255, 253, 178);
	font-size: 0.9em;
}

.aju {
	display: flex;
	align-items: center;
	margin: 10px;
}

.texte_trp {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}


/* Pied de page */

footer {
	display: flex;
	justify-content: space-between;
	padding-left: 20px;
	padding-right: 20px;
	background-color: black;
}


/* Partie Robozzle */

.logo {
	margin: auto;
}


/*Partie lien cliquable*/

footer a {
	text-decoration: none;
	color: rgb(178, 89, 82);
	font-weight:...

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();
			}

		);