JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<!-- <a class="external-link buttonControl" href="#" onclick="return getOverlayContent('overlay-content');">Click ME</a>

<script type="text/html" id="overlay-content">// <![CDATA[ -->
    <p class="contact-name">John Smith</p>
    <p>Director of Safety</p>
    <ul class="contacts">
        <li class="clearfix">
            <div class="col-xs-6 col-sm-3"><strong>Mobile</strong></div>
            <div class="col-xs-6 col-sm-3 text-primary"><span class="glyphicon glyphicon-earphone"></span> Call</div>
            <div class="col-xs-12 col-sm-6">079 1234 5678</div>
        </li>
        <li class="clearfix">
            <div class="col-xs-6 col-sm-3"><strong>Alt.</strong></div>
            <div class="col-xs-6 col-sm-3 text-primary"><span class="glyphicon glyphicon-earphone"></span> Call</div>
            <div class="col-xs-12 col-sm-6">079 1234 5678</div>
        </li>
        <li class="clearfix">
            <div class="col-xs-6 col-sm-3"><strong>Office</strong></div>
            <div class="col-xs-6 col-sm-3 text-primary"><span class="glyphicon glyphicon-earphone"></span> Call</div>
            <div class="col-xs-12 col-sm-6">079 1234 5678</div>
        </li>
        <li class="clearfix">
            <div class="col-xs-6 col-sm-3"><strong>Email Address</strong></div>
            <div class="col-xs-6 col-sm-3 text-primary"><span class="glyphicon glyphicon-envelope"></span> Email</div>
            <div class="col-xs-12 col-sm-6">[email protected]</div>
        </li>
    </ul>
<!-- // ]]></script> -->

CSS

.container {
    margin-top: 25px;
}

.contact-name {
    font-size: 24px;
    font-weight: 600;
    line-height: 18px;
    margin: 0;
}

.contact-name + p {
    font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    margin: 0.5em 0 0;
}

ul.contacts {
    padding: 0;
    margin: 30px 0 0;
    list-style: none;
}

ul.contacts li {
    padding: 16px 0;
    border-bottom: 1px solid #c2c2c2;
}

ul.contacts li:active {
    background: #d9edf7;
}

ul.contacts li .col-xs-6, ul.contacts li .col-sm-3, ul.contacts li .col-xs-12 {
    padding: 0;
}

JavaScript

function showPanelOverlay(panel) {
    //console.log(panel);
    var $panel = panel;
    console.log($panel);
    var panelContent = $panel.html();
    console.log(panelContent);
}

function getOverlayContent(contentID) {
    //console.log(contentID);
    var panelOverlayContent = $('#'+contentID).html();
    //console.log(panelOverlayContent);
    var content = panelOverlayContent.replace("// <![CDATA[", "").replace("// ]]>", "");
    //console.log(content);
    showPanelOverlay(content);
}