JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kristaps Design</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  </head>
  <body>
    <header></header>
    <div class="background" id="home">
      <div class="nav">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#works">Works</a>
        <a href="#skills">Skills</a>
        <a href="#contacts">Contact</a>
        <a href="#socialmedia">Social Media</a>
      </div>
    </div>
    <div class="intro">Kristaps LÅ«sis</div>
    <div class="intro2">Front End, UI/UX, Web Design</div>
    <a href="#contacts" class="bigbtn">GET IN TOUCH</a>
    <section id="about">
      <h2>About</h2>
      <article>
        <img id="aboutimg" src="https://via.placeholder.com/600x400/300" alt="about me">
        <p>Hi, I'm Kristaps.</p>
        <p>I'm 24, originally from Riga, Latvia. Currently based in Copenhagen, Denmark. I have currently enrolled at Zealand Institute of Business and Technology where I study Multimedia Design & Communication, though prior to that I have already taken a
          similiar education that helped me learn the technology stack that I currently use.</p>
        <p>I have always had a passion for tech and computers, ever since I remember myself really, so it was natural for me to pursue something tech related as a career, it has always fascinated me how much you can do with a computer, be it creative or technical.
          In my spare time I enjoy playing a good video game, lifting some weights at the gym or annoying my cat.</p>
        <p>All things aside, I would describe myself as a goal oriented person and I always try to become the best version of myself...

CSS

@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: "Raleway";
  font-weight: 400;
  background-image: linear-gradient(
    to right,
    #021d46,
    #052b5e,
    #073a78,
    #074a92,
    #005bae
  );
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.nav {
  overflow: visible;
  top: 3%;
  right: 2.5%;
  position: fixed;
}

.nav a {
  color: #fff !important;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 1.063em;
  text-transform: uppercase;
  font-family: "Raleway";
  font-weight: 700;
}

.nav a:hover {
  border-bottom: 2px solid #ca4d54;
  transition: 0.2s;
}


.intro {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Raleway";
  font-weight: 700;
  text-transform: uppercase;
  font-size: 45px;
  color: #f5f3f4;
}

.intro2 {
  text-align: center;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  font-size: 30px;
  font-family: "Raleway";
  font-weight: 700;
  color: #f5f3f4;
}

.bigbtn {
  text-align: center;
  position: absolute;
  top: 63%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  font-size: 35px;
  font-family: "Raleway";
  font-weight: 700;
  color: white;
  background-color: transparent;
  border: 2px solid white;
  text-decoration: none;
  padding: 0.5%;
}

.bigbtn:hover {
  text-align: center;
  position: absolute;
  top: 63%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  font-size: 35px;
  font-family: "Raleway";
  font-weight: 700;
  color: #fff;
  background-color: transparent;
  border: 4px solid white;
  transition: 0.5s;
}

h2 {
  text-align: center;
  padding-top: 1%;
  margin: 0;
  text-transform: uppercase;
  color: #fff;
}

section {
  width: 100%;
}

p {
  text-align: center;
  width: 100%;
 ...