JSFiddle - React, Tailwind, and code Playground

by ced1

HTML

<!DOCTYPE html>
<html>
<head>
    <title>RBM Makeup</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="intro">
    <div class="inner">
        <div class="content">
            <h1> <span id="Rebecca"> Rebecca </span> <span id="Bermingham"> Bermingham </span> <span id="Maguire"> Maguire</span></h1>
            <div class="container">
                <a href="#" class="hvr-sweep-to-right">Portfolio</a>
                <a href="#" class="hvr-sweep-to-bottom">Contact</a>
                <a href="#" class="hvr-sweep-to-left">About Me</a>
            </div>  
        </div>
    </div>

    <div class="footer">
        <div class="instagram">
            <a href="#" class="fa fa-instagram" id="fix"></a>
        </div>
    </div>

</section>
</body>
</html>

CSS

:root{
    --maroon: #85144b;
    --fuchsia: #f012be;
    --purple: #b10dc9;
    --lime: #01ff70;
    --black: #000000;
    --white: #ffffff;
    --blue: #89cff0;
}

@font-face{
    font-family: 'milkshake';
    src:url(fonts/Milkshake.ttf);
    font-style: normal;
    font-weight: 100;
}

@font-face{
    font-family: 'amble';
    src:url(fonts/Amble-Regular.ttf);
    font-style: normal;
    font-weight: 100;
}

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

/**/

.intro{
    height:100vh;
    width:100%;
    margin-right: 20px;
    margin: auto;
    background: url("images/eye.jpg") no-repeat 50% 50%;
    display: table;
    top: 0;
    background-size: cover;
    opacity: 0.92;
}

.intro .inner{
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    max-width: none;
}

.content h1{
    color: var(--blue);
    font-size: 350%;
    margin: 0px 0px;
    text-align: center;
    text-transform: bold;
    font-family: milkshake;
    font-weight: 100;
}

#Rebecca{
    color: var(--purple);
}

#Bermingham{
    color: var(--lime);
}

.container{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: center;
    margin-top: 50px;
}

.container a{
    border-radius: 9px;
    color: var(--black);
    font-size: 135%;
    padding: 10px 20px;
    text-decoration: none;
    border: solid var(--black) 5px;
    text-transform: uppercase;
    margin: 20px 40px;
    font-family: amble;
    font-weight: 150;
    font-style: bold;
}

/*Hover effects for 3 buttons*/

/*Left Button*/

.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position:...