JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<img src="http://placedog.com/200/200">

CSS

body { padding: 50px; text-align: center; }

img {
    /* #1 */
    border: 5px solid hsl(0, 0%, 40%);
    
    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);
    
    /* #3 */
    outline: 5px solid hsl(0, 0%, 60%);
    
    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px hsl(0, 0%, 80%),
        0 0 0 15px hsl(0, 0%, 90%);
    
        
    /* If you could do pseudo elements 
       you could get a few more... */
    
    /* Also, HSL is awesome but don't use it if
       you need super old browser support */
}