JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.0/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/html" id="template">
{{#if [Image]}}
<div class=\"small-card-list-detail-image-wrapper\">
  <div class=\"small-card-list-detail-image\" style=\"background-image: url('{{auth [Image]}}')\"></div>
  {{#unless [Image]}}<i class=\"fa fa-user\"></i>{{/unless}}
</div>
{{/if}} 
<div class=\"small-card-list-detail-content-scroll-wrapper\" data-entry-id=\"{{id}}\">
  <div class=\"small-card-list-detail-content-wrapper\">
    {{#unless isCurrentUser}}
    {{#if bookmarksEnabled}}
    <div class=\"small-card-bookmark-holder small-card-bookmark-holder-{{id}}\">
      <div class=\"small-card-bookmark-wrapper btn-bookmark\">
        <i class=\"fa fa-bookmark-o\"></i>
      </div>
      <div class=\"small-card-bookmark-wrapper btn-bookmarked\">
        <i class=\"fa fa-bookmark animated fadeIn\"></i>
      </div>
    </div>
    {{/if}}
    {{/unless}}
    <div class=\"small-card-list-detail-name\">{{[First Name]}} {{[Last Name]}}</div>
    <div class=\"small-card-list-detail-role\">{{[Title]}}</div>
    <div class=\"small-card-list-detail-location\">{{[Location]}}</div>
    {{#unless isCurrentUser}}
    <div class=\"small-card-list-detail-buttons-wrapper\">
      {{#if [Email]}}
      <div class=\"small-card-list-detail-button\">
        <a href=\"mailto:{{[Email]}}\" target=\"_blank\">
          <div class=\"small-card-list-detail-button-image\"><span class=\"fa fa-envelope-o\"></span></div>
          <div class=\"small-card-list-detail-button-text\">EMAIL</div>
        </a>
      </div>
      {{/if}}
      {{#if [Telephone]}}
      <div class=\"small-card-list-detail-button\">
        <a href=\"tel:{{[Telephone]}}\" target=\"_blank\">
          <div class=\"small-card-list-detail-button-image\"><span class=\"fa fa-phone\"></span></div>
          <div...

JavaScript

Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
    switch (operator) {
      case '==':
        return (v1 == v2) ? options.fn(this) : options.inverse(this);
      case '===':
        return (v1 === v2) ? options.fn(this) : options.inverse(this);
      case '!=':
        return (v1 != v2) ? options.fn(this) : options.inverse(this);
      case '!==':
        return (v1 !== v2) ? options.fn(this) : options.inverse(this);
      case '<':
        return (v1 < v2) ? options.fn(this) : options.inverse(this);
      case '<=':
        return (v1 <= v2) ? options.fn(this) : options.inverse(this);
      case '>':
        return (v1 > v2) ? options.fn(this) : options.inverse(this);
      case '>=':
        return (v1 >= v2) ? options.fn(this) : options.inverse(this);
      case '&&':
        return (v1 && v2) ? options.fn(this) : options.inverse(this);
      case '||':
        return (v1 || v2) ? options.fn(this) : options.inverse(this);
      default:
        return options.inverse(this);
    }
  });

  Handlebars.registerHelper('validateImage', function(image) {
    var validatedImage = image;

    if (!validatedImage) {
      return '';
    }

    if (Array.isArray(validatedImage) && !validatedImage.length) {
      return '';
    }

    // Validate thumbnail against URL and Base64 patterns
    var urlPattern = /^https?:\/\//i;
    var base64Pattern = /^data:image\/[^;]+;base64,/i;
    if (!urlPattern.test(validatedImage) && !base64Pattern.test(validatedImage)) {
      return '';
    }

    if (/api\.fliplet\.(com|local)/.test(validatedImage)) {
      // attach auth token
      validatedImage += (validatedImage.indexOf('?') === -1 ? '?' : '&') + 'auth_token=' + Fliplet.User.getAuthToken();
    }

    return validatedImage;
  });

  Handlebars.registerHelper('formatDate', function(date) {
    return moment(date).utc().format('DD MMMM YYYY');
  });

  Handlebars.registerHelper('removeSpaces', function(context) {
    return context.replace(/\s+/g,...