JSFiddle - React, Tailwind, and code Playground

by SANDEEP VIRANI

HTML

<div>
    <ul>
        <li id="on">List 1</li>
        <li id="tw">List 2</li>
        <li id="th">List 3</li>
        <li id="fo">List 4</li>
    </ul>
</div>

CSS

body{
    background:url(http://media.tumblr.com/35fe5c833f1ca6479a2af5d6a1cbe67c/tumblr_inline_mnciuyFKHk1qz4rgp.jpg);
}
ul{
   background:transparent;
    padding:100px 20px;
}

li{
    display:inline-block;
    width:200px;
    height:150px;
    background:gray;
    margin: 0 0 0 1px;
    padding:0px;
    color:#ffffff;
}
#tw{
    -webkit-border-image: url(https://tinypng.com/web/output/rhm7dk04etm4c7ti.png/brdrRed.png) 30 0 round; /* Safari 3.1-5 */
    border-image-outset: 30px;
    border-image-width: 30px;
    
    -webkit-transition:all 0.4s;
}