JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Responsive</h2>

<figure class="gradient-responsive">
    <img src=" http://placehold.it/480x220/000000" />
</figure>

<h2>Fixed Width</h2>

<figure class="gradient-fixed">
    <img src="http://placehold.it/480x220/000000" />
</figure>

CSS

*{margin:0;padding:0;}body{max-width:480px;width:90%;width:90%;margin:2em auto;}
html{background:#111}

h2 {
    color:#aaa;
    font:150%/1.5 sans-serif;
    text-align:right;
    font-weight:bold;
    text-shadow:-.1em .1em 0 #333;
    letter-spacing: -.05em;
    border-bottom: 1px solid #555;
}

.gradient-responsive {margin: .75em auto 3em auto;max-width:480px;}
.gradient-responsive img {max-width:100%;height:auto;width:99%;padding:.5%;}
.gradient-responsive img { 
    background: #d8d8d8;
    background: -moz-linear-gradient(top, #d8d8d8 0%, #0e0e0e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(100%,#0e0e0e));
    background: -webkit-linear-gradient(top, #d8d8d8 0%,#0e0e0e 100%);
    background: -o-linear-gradient(top, #d8d8d8 0%,#0e0e0e 100%);
    background: -ms-linear-gradient(top, #d8d8d8 0%,#0e0e0e 100%);
    background: linear-gradient(top, #d8d8d8 0%,#0e0e0e 100%);
}

.gradient-fixed {margin: .75em auto 3em auto;width:476px;}
.gradient-fixed img {width:476px;padding:2px;}
.gradient-fixed img { 
    background: #d8d8d8;
    background: -moz-linear-gradient(top, #d8d8d8 0%, #0e0e0e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(100%,#0e0e0e));
    background: -webkit-linear-gradient(top, #d8d8d8 0%,#0e0e0e 100%);
    background: -o-linear-gradient(top, #d8d8d8 0%,#0e0e0e 100%);
    background: -ms-linear-gradient(top, #d8d8d8 0%,#0e0e0e 100%);
    background: linear-gradient(top, #d8d8d8 0%,#0e0e0e 100%);
}

JavaScript

// gradient borders 3