JSFiddle - React, Tailwind, and code Playground

by _jro

HTML

<html>
<head>
    <title>responsive images</title>
</head>
    
<body>
    <div class="container">
        <img src="http://animatedviews.com/wp-content/uploads/2009/04/pupnamedscooby1.jpg" width="294" height="225" class="frame" alt="pup named scooby doo">
    </div>
</body>
</html>

CSS

body { background: #dcdcdc; }
img { max-width: 100%; height: auto; }

.container { padding: 10px 12px; }
.frame { 
    background: #fff; 
    padding: 6px;
    box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -moz-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -webkit-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
}