JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<header>
        <h1>Gradient Borders</h1>
        <h2>by <a href="http://genelocklin.com" rel="external" title="Gene Locklin" target="_blank">Gene Locklin</a></h2>
    </header>

    <div>
        <h2>Gradient - Responsive</h2>
        <figure class="gradient">
            <img src="http://placehold.it/480x320" alt="placeholdit img" />
        </figure>
    </div>

    <div>
        <h2>Faux Gradient - Fixed</h2>
        <figure class="faux-gradient-fixed">
            <img src="http://placehold.it/480x320" alt="placeholdit img" />
        </figure>
    </div>

    <div>
        <h2>Faux Gradient - Responsive</h2>
        <figure class="faux-gradient-responsive">
            <img src="http://placehold.it/480x320" alt="placeholdit img" />
        </figure>
    </div>

    <div>
        <h2>Faux Gradient - Responsive Two</h2>
        <figure class="faux-gradient-responsive-two">
            <img src="http://placehold.it/480x320g" alt="placeholdit img" />
        </figure>
    </div>

CSS

/*- 
    unrelated styles 
---------------------------------------------------*/
* { 
    margin: 0; 
    padding: 0; 
}


body { 
    max-width: 480px; 
    width: 90%;
    margin: 0 auto;
    font: 1em/1.5 sans-serif;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section { 
    display: block; 
}

div,
figure {
    -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

header { 
    margin: 3em auto; 
}

header h1 { 
    font-size: 2em;
    line-height: 1;
    margin-bottom: .125em;
}

header h2 { 
    font-size: .875em;
    line-height: 1;
    
}

header h2 a { 
    color: #314ee4;
}

header h2 a:hover { 
    color: #000;
}

div > h2 { 
    font-size: 1.5em;
    line-height: 1;
    margin-bottom: .5em;
    padding-bottom: .25em;
    border-bottom: 1px solid #314ee4;
    color: #000;
    text-align: right;
}

div { 
    margin: 6em auto;
}

a { 
    text-decoration: none; 
}

img { 
    box-shadow: 0px 2px 7px rgba(0,0,0,.24); 
}

figure { margin: 0 auto .75em 0 auto; }

/*- 
    gradient code 
---------------------------------------------------*/

/*- .gradient ----------*/
.gradient { 
    max-width: 100%; 
    position: relative; 
}  

.gradient img { 
    max-width: 100%; 
    height: auto; 
    border-top: 2px solid #314ee4; 
    border-bottom: 2px solid #000; 
}  

.gradient:after, .gradient:before { 
    content: ""; 
    height: 97.5%; 
    left: 0px; 
    position: absolute; 
    top: 0; 
    width: 2px; 
    z-index: 4;  
    background: -webkit-linear-gradient(top, #314ee4 0%,#000 100%);
    background:    -moz-linear-gradient(top, #314ee4 0%,#000 100%);
    background:     -ms-linear-gradient(top, #314ee4 0%,#000 100%);
    background:      -o-linear-gradient(top, #314ee4 0%,#000 100%);
    background:         linear-gradient(top, #314ee4 0%,#000 100%);
}  

.gradient:before { 
    left: auto; 
    right: 0px; 
}  

.gradient:after { 
    left: 0px; 
    right:...

JavaScript

// gradient borders by @genelocklin