JSFiddle - React, Tailwind, and code Playground

by iamvdo

HTML

<div>Du houblon!</div>
<div>Du houblon!</div>
<div>Du houblon!</div>
<div>Du houblon!</div>
<div>Du houblon!</div>
<div>Du houblon!</div>

<div></div>
<div></div>
<div></div>

<textarea></textarea>

CSS

body{height:2000px;}
div,textarea{
    font-family:sans-serif;
    font-size:1em;
    color:rgba(0,0,0,.7);
    text-shadow:0 1px 0 rgba(255,255,255,.4);
    float:left;
    margin:70px 0 0 70px;
    width:100px;
    height:100px;
    background:url(http://cedricici.eu/css3/images/houblon.jpg);
    padding:25px;
    border:10px solid rgba(0,0,0,.3);
    /*background-clip:border-box;*/
    /*background-origin:padding-box;*/
    box-shadow:0 0 5px rgba(0,0,0,.5);
}
div:nth-child(1){
    background-origin:border-box;
}
div:nth-child(2){
    background-origin:padding-box; /*defaut*/
}
div:nth-child(3){
    background-origin:content-box;
}
div:nth-child(4){
    background-origin:border-box;
    background-clip:content-box
}
div:nth-child(5){
    background-origin:padding-box;
    background-clip: content-box;
}
div:nth-child(6){
    background-origin: content-box;
    background-clip: content-box;
}
div:nth-child(7){
    background-origin:border-box;
    background-size:100px;
}
div:nth-child(8){
    background-origin:border-box;
    background-size:contain;
}
div:nth-child(9){
    background-origin:border-box;
    background-size:cover;
}
div:nth-child(10){
    background-origin:border-box;
    background-size:cover;
}
div:nth-child(11){
    background-origin:border-box;
    background-size:100px;
}
div:nth-child(12){
    background-origin:border-box;
    background-size:contain;
}
textarea{
    background-size:cover;
}