JSFiddle - React, Tailwind, and code Playground

by Dawid Karwat

HTML

<div id="p1">Jestem Jeden</div>
<div id="p2">Jestem Dwa</div>
<div id="p3">Jestem Trzy</div>
<div id="p4">
    <div class="Wewnetrzny">Jestem inny</div>
    <div class="Wewnetrzny">Jestem inniejszy</div>
</div>

CSS

#p1{
    background-color: yellow;
}
#p2{
    width:140px;
    height:100px;
    margin:5px;
    background-image: url('http://cf.ltkcdn.net/cats/images/std/159708-419x310-brown-kitten.jpg');
    background-size: 100% 100%;
}
#p3{
    width: 200px;
    height: 30px;
    border: 2px solid #07F;
    padding-left: 20px;
    color: red;
    transition: 200ms ease-out;
}
#p3:hover{
    background-color: #FCC;
    cursor: help;
}
#p4{
    width: 30%;
    min-width:300px;
    height: 60px;
    background-color: aqua;
    overflow-y: auto;
}
.Wewnetrzny{
    background-color: rgba(255,127,0,0.4);
    width: 100px;
    margin: 10px;
}
#p4 > div:nth-child(2){
    transform: translateX(20px) rotate(-50deg);
}