JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

<script src="https://widget-staging.socialmarketanalytics.com/sma_cards/source/js/sma_widget.js?" +Date.now()></script>


<div class="education-video-section" style="margin-top:20px;">
  <div style="background-color: #fff;" class="card" id="card_intraday">
    <div style="color:#000; font-weight:700; border-bottom: 1px #dfdfdf solid;margin-right: 15px;padding-bottom: 5px;">Social Sentiment - Gold
      <span style="float: right;">
                                 <a style="cursor: pointer;" title="Expand Chart" onclick="showDetail()" id="show_intraday_detail"><img style="width: 16px;" src="../source/images/expand_plus.png"></a>
                                 <a style="display: none;" href="#cme_widget_detail_popup" title="Expand Chart" onclick="expandPopup()" id="show_detail"></a>
                                 <a style="display: none;" href="https://widget-staging.socialmarketanalytics.com/sma_intra_day_detail/demo/?s=GC_F" target="_blank" id="show_detail_mobile"></a></span></div>
    <div id="sma_intraday_container"></div>
    <div style="border-top:1px #dfdfdf solid;margin-right: 15px;padding-bottom: 5px;margin-top: 5px;display: inline-block;width: 97%;font-size: small;color: #7676ff;">
      <a style="float: left;font-size: 8px; display: none" id="desktop_browser_link" href="#interprete_help_popup"></a>
      <a style="float: left;font-size: 8px; display: none" id="mobile_browser_link" href="interprete_help_data.html" target="_blank"></a>
      <a style="float: left;font-size: 8px; cursor: pointer;" onclick="showHelpPopup()">Disclaimer</a>
    </div>
  </div>
</div>

CSS

.card {
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
           transition: 0.3s;
           padding: 10px 0px 0px 10px;
           font-family: 'Benton Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
           overflow: hidden;
         }

         .card:hover {
           box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
         }

         .interprete-data {
           position: absolute;
           top: 0;
           bottom: 0;
           left: 0;
           right: 0;
           background: rgba(0, 0, 0, 0.5);
           transition: opacity 200ms;
           visibility: hidden;
           opacity: 0;
           text-align: center;
           z-index: 99;
         }

         .interprete-data.interprete_light_data {
           background: rgba(0, 0, 0, 0.5);
         }

         .interprete-data.intereprete_content_data {
           margin: 0 -10px;
           padding: 20px;
         }

         .intereprete_content_data {
           padding: 10px;
         }

         .interprete-data .interprete_cancel_data {
           position: absolute;
           width: 100%;
           height: 100%;
           cursor: default;
           left: 0;
           top: 0;
         }

         .interprete-data:target {
           visibility: visible;
           opacity: 1;
         }

         .inteprete_popup_data {
           margin: 0px auto;
           padding: 20px 20px 10px;
           background: #fff;
           border: 1px solid #666;
           width: auto;
           display: inline-block;
           margin-left: auto;
           top: 20%;
           margin-right: auto;
           box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
           position: relative;
           top: 130px;
         }

         .interprete_light_data .inteprete_popup_data {
           border-color: #aaa;
           box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
         }

         .inteprete_popup_data h2 {
           font-size: 30px;
         }

         .inteprete_data_close_popup {
   ...

JavaScript

SMA.SMAIntraDay({
            container: 'sma_intraday_container',
            width: '100%',
            height: '300',
            apikey: 'a8ba49e8bd374fb6d96f7dc63616d3ee43494ee3',
            ontology: 'metal',
            subjects: 'GC_F',
            showEnlarge: false,
            hideHeader: true,
            showXaxis: true,
            showYaxis: true,
            showSentiment: true,
            showTooltip: true,
            autoRefresh: true,
            onClick: function() {
              document.getElementById("show_intraday_detail").click();
            },
            onChartLoad: function(sscore) {
              var color = getFactorsSentimentColor(sscore);
              document.getElementById("card_intraday").style.border = "4px solid " + color;
            },
            onAutoUpdate: function(sscore) {
              var color = getFactorsSentimentColor(sscore);
              document.getElementById("card_intraday").style.border = "4px solid " + color;
            }
          });

          function showHelpPopup() {
            if (checkMobileBrowser()) {
              document.getElementById('mobile_browser_link').click();
            } else {
              document.getElementById('desktop_browser_link').click();
            }
          }

          function checkMobileBrowser() {
            var check = false;
            (function(a) {
              if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s...