JSFiddle - React, Tailwind, and code Playground

by popsul

HTML

<html>
    <!-- мой первый шаг -->
    <head> <!-- вот тебе :P -->
        <title> учебная фигня </title>
    </head>
    <body>
        <div class="inline">
            <strong>а</strong>
            <sup>теперь</sup>
            <sub>о</sub>
            <em>инлайновых</em>
            <strike>элементах</strike>
        </div>
        <div class="block">
            <p>и</p>
            <blockquote>блочных</blockquote>
            <pre>элементах</pre>
        </div>
        
        <p>
            Инлайновые элементы необходимы для преобразований текста,
            т.е. изменения начертания, семантического указания того, чем
            является текст. Как видно выше, они ведут себя как строки,
            они не переносятся. inline - in line - в строке.
        </p>
        <p>
            Блочные элементы необходимы для выделения неких блоков,
            Внутри блочных элементов распологаются либо другие блочные 
            элементы, либо текстовые (ну либо и то, и то). Как видно выше - 
            блочные элементы переносятся, так как занимают всю доступную 
            ширину, не смотря на то, что в них контента практически
            нет.
        </p>        
        
    </body>
</html>

CSS

/* это пока тебе рано учить) */
.inline > * { border:1px solid #f00; }
.block > * { border:1px solid #0f0; }