JSFiddle - React, Tailwind, and code Playground

by skinny

HTML

<body>
	<header>
		<section class="left">
			<h1>Webapp</h1>
		</section>

		<section class="right">
			<ul sec:authorize="isAnonymous()">
				<li><a th:href="@{/signin}">login</a></li>
				<li><a th:href="@{/signup}">cadastro</a></li>
			</ul>

			<ul sec:authorize="isAuthenticated()">
				<li><span sec:authentication="name"></span>
					<ul>
						<li><a href="#">perfil</a></li>
						<li><a th:href="@{/logout}">sair</a></li>
					</ul>
				</li>
			</ul>
		</section>
	</header>

	<nav>
		<ul>
			<li><a href="#">item 1</a></li>
			<li><a href="#">item 2</a></li>
			<li><a href="#">item 3</a></li>
			<li><a href="#">item 4</a></li>
			<li><a href="#">item 5</a></li>
		</ul>
	</nav>

	<main></main>

	<footer>
		<section class="left">
			<h1>Copyright</h1>
			<span> Kleber Mota de Oliveira</span>
		</section>

		<section class="right">
			<h1>website</h1>
			<a href="http://klebermota.eti.br"> klebermota.eti.br</a>
		</section>
	</footer>

	<script src="js/script.js"></script>
</body>

CSS

@import url(https://fonts.googleapis.com/css?family=Sigmar+One|Special+Elite|Contrail+One);

header {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: #00a087;
}

header section ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}

header section ul li {
  display: inline;
}

footer {
  position: fixed;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: #00a087;
}

footer section ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}

footer section ul li {
  display: inline;
}

section {
  display: inline;
}

.right {
  position:fixed; right: 7px;
}

.left {
  position:fixed; left: 7px;
}

nav {
  margin-top: 60px;
  width: 25%;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}

nav ul li {
  padding: 5px;
}

nav ul li a {
  background: #00FF66;
  text-decoration-color: #003300;
}

nav ul li a:hover {
  backgroud: #009966;
  text-decoration-color: #003300;
}

main {
  margin-top: 60px;
  width: 75%;
  font-family: 'Special Elite', cursive;
}

h1 , h2 , h3 , h4 , h5 , h6 {
  font-family: 'Sigmar One', cursive;
  display: inline;
}

a {
  font-family: 'Contrail One', cursive;
}