JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Poppins:wght@500;600&display=swap"
        rel="stylesheet">
</head>
<body>
  <header class="header-portfolio">
    <div class="container">
        <div class="header-portfolio-body">
            <div class="header-portfolio-logo">
                <div class="logo">
                    <img src="./images/icons/logo.svg" alt="">
                    <p>Portfolio</p>
                </div>
            </div>
            <div class="menu">
                <a href="#">Projects</a>
                <a href="#">Technologies</a>
                <a href="#">About me</a>
            </div>
            <div class="icons">
                <a href="#">
                    <img src="./images/icons/mark-github-24.svg" alt="">
                </a>
                <a href="#">
                    <img src="./images/icons/Linkedin.svg" alt="">
                </a>
                <a href="#">
                    <img src="./images/icons/Figma.svg" alt="">
                </a>
            </div>
        </div>
    </div>
  </header>  
  <section class="portfolio">
    <div class="container">
        <div class="portfolio-body">
          <div class="portfolio-text">
            <h1 class="portfolio-title">Portfolio</h1>
            <h3 class="portfolio-subtitle">An easy way to show your benefits</h3>
            <div class="portfolio-btn">
                <a class="portfolio-link" href="#">Let’s begin</a>
            </div>
        </div>
         <div class="portfolio-img">
           <img...

CSS

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    color: #FFFFFF;
    font-size: 16px;
}


body{
    background: #0F1624;
    font-family: 'Poppins';
}
.container{
    max-width: 1660px;
    margin:0 auto;
}
.header-portfolio {
    margin: 46px 0;
}

.header-portfolio-body {
    display: flex;
    justify-content: space-between;
}

.header-portfolio-logo {
    display: flex;
    align-items: center;
}
.header-portfolio-logo p{
        font-style: normal;
        font-weight: 500;
        font-size: 30px;
        line-height: 45px;
}

.logo {
    margin-right: 12px;
}

.menu a{
        margin: 0 49px;
        font-style: normal;
        font-weight: 500;
        font-size: 30px;
        line-height: 45px;
        text-decoration: none;
}

.icons a{
        margin: 0 15px;
        width: 32px;
        height: 32px;
}
.portfolio {
    margin-top: 145px;
}

.portfolio-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.portfolio-text {}

.portfolio-title {
        font-style: normal;
        font-weight: 600;
        font-size: 96px;
        line-height: 144px;
        margin-left: 60px;
        margin-bottom: 23px ;
}

.portfolio-subtitle {
        font-style: normal;
        font-weight: 600;
        font-size: 48px;
        line-height: 72px;
        color: #BCBCBC;
        margin-left: 122px;
        margin-bottom: 123px;
}

.portfolio-btn {
       
        width: 280px;
        height: 80px;
        background: linear-gradient(270deg, #13ADC7 0%, #6978D1 66.67%, #945DD6 100%);
        border-radius: 83px;
        padding: 19px 63px;
        margin-left: 169px;
}

.portfolio-link {
        font-style: normal;
        font-weight: 600;
        font-size: 28px;
        line-height: 42px;
     
}


.portfolio-img {
    position: relative;
    top: 0px;
    right: 0px;
    height: 758px;
    padding-top: 284px;

}
.portfolio-img img {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 758px;
  ...