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-01a8c4df0ef6c6b05fe2d75d39b4b9cb">
                    <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 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 class="views-row...

CSS

body {
    background: grey;
}
#block-views-recent-on-mnet-block-1 {
    position: relative;
    border: 2px solid transparent;
    padding: 5px;
    float: left;
    width: 190px;
}
#block-views-recent-on-mnet-block-1:before, #block-views-recent-on-mnet-block-1:after {
    content:"";
    position: absolute;
    top: -5px;
    bottom: -5px;
    right: -15px;
    width: 2px;
    
    background-image:  linear-gradient(#fff 130px, transparent 140px);
    
    /*
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    background-image: -webkit-linear-gradient(#000, transparent);
    background-image: -moz-linear-gradient(#000, transparent);
    background-image: -o-linear-gradient(#000, transparent);
    background-image: linear-gradient(#000, transparent);
    */
}