JSFiddle - React, Tailwind, and code Playground

by Moor

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML, CSS and JavaScript demo</title>
</head>

<body style="background: lightblue;">
    <h1>Первый урок для Теоны. Это заголовок h1</h1>
    <p>Это простой абзац. Я сюда добавлю несколько слов: самовар, сапоги, тыблоко. Просто так.</p>
    <h2>А это заголовок h2</h2>
    <p>Обрати внимание, как я покрасил фон страницы — добавл стиль прямо в тэге body. Это очень легко. Смотри, сейчас я сделаю одно слово жирным и покрашу его в другой цвет: <strong style="color:#BB2200;">однослово</strong>.</p>
    <h2 style="text-align:center; color:blue;">А вот заголовок по центру</h2>
    <p>И еще этот заголовок синий. Но что ещё можно придумать?</p>
    <p style="color:red; background-color: white; padding:10px;">Попробуем сделать совсем другой абзац. Смотри, здесь текст красный, фон белый, а еще я сделал отступы внутри параграфа. Теперь ты видишь границы этого элемента.</p>
    <h2>А теперь нарисуем…</h2>
    <p>…линию. Ну не совсем нарисуем, но для таких линий есть тэг — hr. Вот что получится, если его не стилизовать:</p>
    <hr />
    <p>А вот сейчас мы займёмся его стилями:</p>
    <hr style="border:none; height: 15px; background: blue;" />
    <p>У нас получилась горизонтальная линия без границы (border:none;), высотой 15 пикселей и синего цвета.</p>
</body>

</html>