JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

HTML

<p> Čisto bez ikakvih modifikacija,</p>
<div class="first">
    <div class="second">
        
   </div>
</div>
<p>modifikacija prvog objekta</p>
<div class="third">
    <div class="fourth">
        <p>text</p>
        <p id="floating"> floating, floating, floating floating floating</p>
        
   </div>
</div>
<p>vidis cim stvavis paragraf ili bilo sto float ce ti pushat ovo</p> 
<p style="clear:left;font-weight:bold;">E sad kad stavim clear, onda opet ide normal element flow of the page</br>
da nisi stavio clear text bi isao gore tik do float-a
</p>

CSS

.first
{
    border:2px solid blue;
    height:100px;
    width:100px;
}
.second
{ 
     border:2px solid black;
     height:50px;
     width: 50px;
     
}
.third
{
    border:2px solid blue;
    height:100px;
    width:100px;
}
.fourth
{ 
     border:2px solid black;
     height:50px;
     width: 50px;
     padding-right:5px;   /* padding ti je indent unutar objekta, unutar bordera*/
     margin-left:5px;     /* margin ti je indent izvan objekta objekta, izvan bordera*/
     margin-top:5px;
}
#floating
{
  float:left;    /*float opcija ti omogucava izlazak elementa iz "natural flowa zamisli si to ko"*/
                 /*nesto sto samo stavis na stranicu i nista na taj objektom koji jie pod floatom"*/
                /*ne moze utjecat, jedino ti float omogucava push elemenata na lijevu ili desnu str.*/
               /*ovisno o vrijednosti floata*/
}