JSFiddle - React, Tailwind, and code Playground

by php_jquery_ir

HTML

<body>
    <div class="d1">
        لایه اول
        <div class="d2">
            لایه دوم
        </div>
        <div class="d3">
            لایه سوم
        </div>
    </div>
    <div class="d4">
        لایه چهارم
    </div>
<!-- php-jquery.ir -->
</body>

CSS

*{direction:rtl;font:13px/1.5em Tahoma;}
.d1{
    outline:1px solid red;    color:red;    background-color:lime;
    
    position:relative;    width:50%;    height:5em;    float:left;
}
.d2, .d3{
    outline:1px solid blue;    color:blue;    background-color:silver;
    
    position:absolute;    width:99px;
}
.d2{top:1em;left:9px;}
.d3{top:7em;left:9px;}
.d4{
    outline:1px solid green;    color:green;    background-color:yellow;
    
    position:absolute;    top:99px;    right:39px;    width:99px;    height:2em;
}