JSFiddle - React, Tailwind, and code Playground

by itbeard

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой сайт</title>
</head>
<body>
 
<header>
    <h1>Название сайта</h1>
    <p class="slogan">Слоган сайта</p>
</header>
 
<main>
    <div class="menu">
        <h2>Меню</h2>
        <!-- Меню элементы здесь -->
    </div>
    <div class="article">
        <h2>Заголовок статьи</h2>
        <p>Текст статьи...</p>
    </div>
</main>
 
<div class="floating-adv">Рекламный блок</div>
 
<footer>Плавающий футер</footer>
 
</body>

CSS

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
header {
  background-color: #f5f5f5;
  padding: 20px;
  text-align: center;
}
.slogan {
  font-size: 0.9em;
}
main {
  display: flex;
  padding: 20px;
}
.menu {
  width: 20%;
  border-right: 1px solid #ccc;
  padding-right: 20px;
}
.article {
  width: 80%;
  padding-left: 20px;
}
.floating-adv {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: #f5f5f5;
  padding: 10px;
}
footer {
  background-color: #f5f5f5;
  text-align: center;
  padding: 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
}