JSFiddle - React, Tailwind, and code Playground

by René Glasow

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">

        <link rel="stylesheet" href="css/icon-font.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="shortcut icon" type="image/png" href="img/favicon.png">
        
        <title>Fischkopp | [webdevelopment]</title>
    </head>
    <header class="header">
        <div class="header__logo-box">
            <img class="header__logo" src="img/fishbone.png" alt="Logo White" >
        </div>
        <div class="header__text-box">
            <h1 class="heading-primary">
                <span class="heading-primary--main">Fischkopp</span>
                <span class="heading-primary--sub">[webdevelopment made in hamburg]</span>
            </h1>
            <a href="#" class="btn btn--white">über mich</a>
        </div>
        
    </header>
    <body>
        
        
    </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }

body {
  font-size: 16;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #777;
  padding: 30px;
  box-sizing: border-box; }

.header {
  height: 95vh;
  background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)), url("../img/pexels-photo-167676.jpeg");
  background-size: cover;
  background-position: top;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%); }

.header__logo-box {
  position: absolute;
  top: 2rem;
  left: 4rem;
  animation: moveInFromTop 1s ease-in; }

.header__logo {
  height: 6rem; }

.header__text-box {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; }

.heading-primary {
  color: #fff;
  text-transform: uppercase;
  backface-visibility: hidden; }

.heading-primary--main {
  display: block;
  font-weight: 700;
  font-size: 4rem;
  letter-spacing: 2.5rem;
  animation: moveInLeft 3s ease-out; }

.heading-primary--sub {
  display: block;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: .5rem;
  margin-bottom: 2rem;
  animation: moveInRight 3s ease-out; }

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px); }
  80% {
    transform: translateX(20px); }
  100% {
    opacity: 1;
    transform: translate(0); } }

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(100px); }
  80% {
    transform: translateX(-20px); }
  100% {
    opacity: 1;
    transform: translate(0); } }

@keyframes moveInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-50px); }
  100% {
    opacity: 1;
    transform: translate(0); } }

.btn:link,
.btn:visited {
  text-decoration: none;
  text-transform: uppercase;
  padding: 1.5rem 4rem;
  display: inline-block;
  border-radius: 10rem;
  transition: all .2s;
  font-size: 1.4rem;
  letter-spacing: .3rem; }

.btn:hover...