JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<body>
    <section class="block block-views contextual-links-region" id="block-views-recent-on-mnet-block-1">
        <div class="block-inner clearfix">
             <h2 class="block-title">Recently on MediaSmarts</h2>

            <div class="block-content content">
                <div class="view view-recent-on-mnet view-id-recent_on_mnet view-display-id-block_1 view-dom-id-6f0cfb98c8cc11a2163517856828f9be">
                    <div class="view-content">
                        <div class="item-list">
                            <ul>
                                <li class="views-row views-row-1 views-row-odd views-row-first">
                                    <div class="views-field views-field-title"> <span class="field-content"><a class="active" href="http://mediasmarts.testing.openconcept.ca/not-black-and-white-understanding-nuances-cyberbullying">Not Black and White: Understanding the Nuances of Cyberbullying</a></span> 
                                    </div>
                                </li>
                                <li class="views-row views-row-2 views-row-even">
                                    <div class="views-field views-field-title"> <span class="field-content"><a href="http://mediasmarts.testing.openconcept.ca/%E2%80%9Cmean-girl%E2%80%9D-stereotype-not-supported-new-national-cyberbullying-study">“Mean girl” stereotype not supported in new national cyberbullying study  </a></span> 
                                    </div>
                                </li>
                                <li class="views-row views-row-3 views-row-odd">
                                    <div class="views-field views-field-title"> <span class="field-content"><a href="http://mediasmarts.testing.openconcept.ca/blog/literacy-digital-literacy-or-media-literacy">Literacy, Digital Literacy or Media Literacy?</a></span> 
                                    </div>
                                </li>
                                <li...

CSS

body {
    background: yellow;
}
section {
    border-width: 0 10px 0 0;
    border-style: solid;
    border-image:url(data:iVBORw0KGgoAAAANSUhEUgAAAAEAAACMCAAAAACYUJxTAAAAEElEQVQYGWP4z8QwCjFDAACvGAIWLvIj5QAAAABJRU5ErkJggg==) 30 30 round;
    /*
    border-image-source: none;
    border-image-source: url(data:image/png;
    base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAACMCAAAAACYUJxTAAAAEElEQVQYGWP4z8QwCjFDAACvGAIWLvIj5QAAAABJRU5ErkJggg==);
    border-image-source: linear-gradient(to top, red, yellow);
    border-image-source: inherit;
    border-width: 5px;
    border: 30px solid transparent;
    */
}