JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<!DOCTYPE html>
<html lang="en-us">

  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./Assets/style.css">
    <title>Portfolio</title>
  </head>

  <body>
    <header>
      <h1><span>MR</span></h1>
      <section>
        <ul>
          <li>
            <a href="#aboutMe">About me</a>
          </li>
          <li>
            <a href="#work">Work</a>
          </li>
          <li>
            <a href="#contactMe">Contact me</a>
          </li>
        </ul>
      </section>
    </header>

    <section class="headerImg">
      <img src="https://via.placeholder.com/512x212">
    </section>

    <section class="content">

      <section id="aboutMe" class="sections">
        <h2 class="float-right">About Me</h2>
        <img src="https://via.placeholder.com/200" class="float-left" />
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam, laudantium nihil explicabo maxime
          molestias nam earum commodi eligendi at eaque perferendis dolorem temporibus alias repudiandae est
          assumenda, illum quas! Ipsam!
        </p>
      </section>

      <section id="work" class="sections">
        <h2 class="float-left">Work</h2>
        <a href="https://github.com"><img id="firstWeb" src="https://via.placeholder.com/150" /></a>
        <div class="work-content">
          <a href="https://github.com"><img class="workImg" src="https://via.placeholder.com/150" /></a>
        <a href="https://github.com"><img class="workImg" src="https://via.placeholder.com/150" /></a>
        <a href="https://github.com"><img class="workImg" src="https://via.placeholder.com/150" /></a>
        <a href="https://github.com"><img class="workImg" src="https://via.placeholder.com/150" /></a>
        </div>
      </section>

      <section id="contactMe" class="sections">
        <h2 class="float-right">Contact Me</h2>
        <ul>
          <li>
            <a href="https://github.com">Github</a>
          </li>
          <li>
      ...

CSS

@font-face { font-family: Cherolina; src: url('./Fonts/coolvetica.ttf'); } 
@font-face { font-family: Roboto; src: url('./Fonts/Roboto-Thin.ttf'); } 
@font-face { font-family: RobotoR; src: url('./Fonts/Roboto-Regular.ttf'); } 

:root{
    --white: #ffffff;
    --dark: #90323d;
}

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

body {
    background-color: #f8edeb;
}

header {
    padding: 2%;
    font-family: Cherolina;
    background-color: var(--dark);
    color: var(--white);
}

header h1 {
    display: inline-block;
    font-size: 70px;
    margin-left: 20px;
    margin-bottom: 10px;
}

header section {
    padding-top: 40px;
    float: right;
    font-family: Roboto;
    font-size: 20px;
}

header section ul {
    list-style-type: none;
}

header section ul li {
    display: inline-block;
    margin-left: 25px;
}

.headerImg{
    margin: 0;
    width: 100%;
    height: 150px;
    overflow: hidden;
    opacity: 70%;
}



header section a {
    color: var(--white);
    text-decoration: none;
}

.headerImg img { width:100%; height:100%; object-fit:cover;}

p {
    font-size: 20px;
}

.float-left {
    float: left;
    margin-right: 25px;
}

.float-right {
    float: right;
    margin-left: 25px;
}

.sections{
    margin: 50px auto;
    width: 90%;
    min-height: 500px;
    display: inline-block;
}

.sections p{
    font-family: roboto;
    margin-top: 50px;
    text-align: justify;
    margin-left: 110px;
    width: 40%;
    display:inline-block;
}

.content h2{
    font-family: cherolina;
    color: var(--dark);
    font-size: 60px;
    margin: 0 100px 0 100px;
    border-bottom: 2px solid var(--white);
}

.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content img{
    width: 100%;
    height: 360px;
    background-size: cover;
    margin: 50px 0 50px 0;
}

.content ul {
    list-style-type: none;
    background-color: rgba(255,255,255,.70);
    height: 30%;
    margin-top: 90px;
        overflow:...