JSFiddle - React, Tailwind, and code Playground

by Karthik Sirasanagandla

HTML

<div class="kartz_margin">Margin
    <div class="kartz_border">Border
        <div class="kartz_padding">Padding
            <div class="kartz_content">Content
            </div>
        </div>
    </div>
</div>

CSS

div {
    background-color: white;
    color: black;
    text-align: center;
    margin-left:auto;
    margin-right:auto;    
}
.kartz_margin {
    border: dashed 1px black;
    width: 450px;
    height: 350px; 
}
.kartz_border {
    border: solid 1px black;
    background-color: black;
    color: white;
    width: 400px;
    height: 300px;    
}
.kartz_padding {
    border: solid 1px brown;
    color: black;
    width: 350px;
    height: 250px;        
}
.kartz_content {
    border: dashed 1px brown;
    width: 300px;
    height: 200px;        
}