JSFiddle - React, Tailwind, and code Playground

by marikasanuki

HTML

<!-- Margin -->
<div id="ex1" class="example margin"></div>

<!-- Padding -->
<div id="ex2" class="example padding"></div>

<!-- Both -->
<div id="ex3" class="example margin padding"></div>

CSS

body {
    background: #eee;
}
.example {
    background: #d5d5d5;
    border: 1px solid;
    width: 50px;
    height: 50px;
}
.margin {
    margin: 10px;
}
.padding {
    padding: 10px;
}
#ex1 {
    float: left;
    position: relative;
}
#ex2 {
    float: left;
    position: relative;
}
#ex3 {
    float: right;
    position: absolute;
    padding:100px;
    margin:100px;
    border:29px dashed #333;
}