JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="cssaryan.css">
</head>
<body>
    <!-- <p style="display: inline;">Para 1</p>
    <b style="display: block;">Bold Text</b>
    Bare Text is always inline. -->
    <div>This is a div.</div>
    AND<span>This is a span.</span>Yes
    <br>They dont have any special style, These are Generic Elements, These two are used for grouping texts.

    <h3>Margins,Paddings,Borders</h3>
    <div class="box" id="div1">
        One
        <div class="box" id="div2">
            Two
            <div class="box" id="div3">
                Three
            </div>
        </div>
    </div>
</body>
</html>

CSS

.box{
    margin: 20px;
}
#div1{
    background-color: lightgreen;
}
#div2{
    background-color: lightsalmon;
}
#div3{
    background-color: lightseagreen;
}