JSFiddle - React, Tailwind, and code Playground

by Ksenia Polyakova

HTML

<title>HYPER PC</title>
   	<link rel="stylesheet" type="text/css" href="css/style.css">
 <body>
     <div class="container">
        <header>
            <h1>ACER PREDATOR X17</h1>
            <img class="notebook"src="img/acer.png">
            <p class="first">7-ОЕ ПОКОЛЕНИЕ ПРОЦЕССОРОВ INTEL CORE i7</p>
            <p class="second"> НОВЕЙШАЯ ГРАФИКА NVIDEA GEFORCE GTX 1080</p>
            <p class="third">NVIDEA G-SYNC</p>
            <p class="fourth"> ВЕНТИЛЯТОР AeroBlade</p>
         </header>
         <div class="secondHeader">
            <h2 class ="about_info">НОВЕЙШАЯ ИГРОВАЯ ГРАФИКА</h2>
                <p class="about">Компания Acer создала игровой ноутбук с новейшим поколением графических карт NVIDIA GeForce® GTX 10 Series. По ожиданиям экспертов производительность новой GeForce® GTX 1080 должна более чем на 40% превысить показатели графических карт GeForce® GTX 900M Series. Благодаря инновационной системе охлаждения Cooler Boost и специальным геймерским технологиям, применённым в игровых ноутбуках Acer Predator, графическая подсистема новейшего поколения NVIDIA GeForce® GTX 1080 сможет продемонстрировать всю свою мощь без остатка. Олицетворяя концепцию “Один клик до VR” и предлагая полное погружение в игровые вселенные с идеально плавным геймплеем, новые игровые ноутбуки Acer разбивают устоявшиеся стереотипы об исключительной производительности десктопов. Ноутбуки Acer Predator готовы поразить любого геймера, заставив взглянуть на мобильные игровые системы по-новому.</p>
         </div>
         <main>
           <h2 class="caption">ФУНКЦИИ ТОВАРА</h2>
           <div class="flex">
            <section class="article-container">
             <article class="functions">
                <h3>NVIDEA G-SYNC</h3>
                <p>NVIDIA® G-SYNC™ обеспечивает плавность игрового процесса за счет синхронизации кадров, обработанных графических процессором, с частотой обновления изображения на экране ноутбука. Это полностью устраняет прерывистость и...

CSS

body{
    padding: 0;
    margin: 0;
    min-height: 100vh;
    font-family: Arial;
}
.container{
    display: flex;
    flex-direction: column;
}
header{
    width: 100%;
    height: 248px;
    background-color: black;
}
h1{
    //font-family: Arial;
    color:  #DC143C;
    font-size: 45px;
    text-align: left;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
    margin-top: 21px;
    padding-left: 129px;
}

.notebook{
    float:right;
    margin-top: -167px;
    margin-right: 329px;
}
.secondHeader{
    width: 50%;
    text-align: justify;  // это чтобы текст выравнивался
    //height: 400px; так не нужно!
}
.about_info{
    padding-left: 125px;
    padding-top: 32px;
    color: #DC143C;
   // font-family: Arial;
}
.about{
 //padding-left: 117px;
}
.about:first-letter{
  //  font-family: "Arial";
    font-size: 200%; 
    color: red;
}
.flex{
    display: flex;
    text-align: justify;
}
main{
    width: 80%;
   // height: 500px; // не надо жестко задавать высоту
    //padding-left: 111px;
}
.caption{
    color:  #DC143C;
    text-align: center;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
    //padding-left: 635px;
}

.article-container {
  max-width: 50%;
}

.functions {
    //font-family: Arial;
//    outline: 1px solid lime;
    padding: 1em 1em 1em 0;
}