JSFiddle - React, Tailwind, and code Playground

by PesecZ42

HTML

<!DOCTYPE html>
<html lang="ru">
<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>OnlineShop</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class=" d-flex">
        <section class="section">
            <div class="container">
                <h1 class="header">Как ухаживать за обувью из кожи</h1>
                <p>
                    Материала для обуви лучше натуральной кожи все ещё не придумали. Качественную кожу очень приятно носить, 
                    она идеально ложится по ноге, в нужных местах немного растягивается. 
                    В кожаной обуви, если она соответствует погоде, создаётся хороший микроклимат – ноги не мёрзнут, не потеют,
                    и чувствуют себя очень комфортно.
                    Неудивительно, что по статистике больше 60% покупателей выбирает обувь именно из гладкой натуральной кожи. 
                    Вдобавок кожа практична и не требует трудоёмкого ухода. 
                </p>
                <p>
                    Но это совсем не означает, что можно раз в полгода протереть обувь тряпочкой и на этом остановиться. 
                    Так же, как кожа лица и тела, материал обуви нуждается в заботе. 
                    Регулярный уход надолго продлит срок службы любимой пары и сделает
                    её аккуратной и сияющей, словно только что из магазина.
                </p>
                <ul>
                    <li> 
                        На что стоит обратить внимание перед покупкой
                    </li>
                    <li>
                        Перед тем, как надеть обувь в превый раз
                    </li>
                    <li>
                        Ежедневный уход за кожанной обувью в домашних условиях
                    </li>
                </ul>
                <img  src="./img/shous.jpg"  alt="Замшевые ботинки">
  ...

CSS

body {
    padding: 100px 75px 101px;
    font-family: Arial, sans-serif;
    color:#2d2d2d;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
}
.header {
    margin: 12px 403px 52px 3px;
    font-size: 50px;
    line-height: 65px;
    font-weight: 700;
    white-space:nowrap;
}

p {
    width: 1092px;
    margin: 0px 73px 30px 0;
    font-size: 22px;
    line-height: 33px;
    font-weight: 400;
}
.middle-section {
    width: 1088px;
    height: 583px;
    margin: 57px 150px 54px 0;
    font-size: 22px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
}
.text-style {
    font-weight: bold;
}

ul {
    width: 445px;
    margin: 20px 264px 26px 1px;
    list-style-type: none;
    font-size: 16px;
    line-height: 24px;
}

img {
    width: 1095px;
    height: 560px;
    margin: 52px 143px 57px 0;
}
.advertising-stambul {
    background-image: url('./img/stambul.png');
    background-repeat: no-repeat;
    background-size: auto;
    margin: 0 0 0 auto; 
    padding: 185px 155px 43px 30px;
    font-family: Lato;
    color: #fff;
}

.advertising-stambul-title {
    width: 346px;
    height: 67px;
    margin: 0 0 18px 1px;
    font-size: 30px;
    font-weight: bold;
    text-align: left;
}

.advertising-stambul-text{
    width: 298px;
    height: 15px;
    margin: 18px 49px 0 0;
    font-size: 16px;
    font-weight: normal;
}

.advertising-duster{
    background-image: url('./img/Duster.png');
    background-repeat: no-repeat;
    background-size:auto;
    margin: 0 0 0 auto; 
    padding: 224px 144px 43px 29px;
    font-family: Lato;
    color: #fff;
    text-align: left;
}

.advertising-duster-title{
    width: 356px;
    height: 23px;
    margin: 0 0 23px 3px;
    font-size: 30px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: normal;
}

.advertising-duster-text{
    word-break:break-all;
    width: 334px;
    height: 15px;
   ...