JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="container">
<div id="shapka">ШАПКА</div>
    <div id="left_p"><p class="text">ЛЕВЫЙ БЛОК</p></div>
<div id="right_p">ПРАВЫЙ БЛОК</div>
    <div id="center_p">
            <p class="text">ЦЕНТР</p>
        <p>да, но если мне надо там разместить несколько блоков в разном расположении, если я установлю паддинг все блоки будут двигаться в одном направлении, которое я задам в родителе.</p>
         <p>да, но если мне надо там разместить несколько блоков в разном расположении, если я установлю паддинг все блоки будут двигаться в одном направлении, которое я задам в родителе.</p> 
    </div>
<div id="bottom_left_p"></div>
<div id="bottom_center_p"></div>
<div id="bottom_right_p"></div>
</div>
</body>

CSS

html, body {height:100%;}

body {background:#fff;font-family:Times New Roman, 

serif;font-size:30px;color:#000;;min-width:1300px;color:#fff;}

#container {min-height:100%;}

#shapka {background:#000000;)no-

repeat;width:1300px;height:331px;margin: 0 auto;}


#left_p {background:#996666;no-

repeat;width:324px;height:738px;float:left;}

#center_p {background:#e69b9e;no-

repeat;width:652px;height:545px;margin:0 auto; padding-top: 100px}

#right_p {background:#996666;no-

repeat;width:324px;height:738px;float:right;}