JSFiddle - React, Tailwind, and code Playground

New App Banner

by DugSohn

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/nd1mexyy0xevhv5/6fdc3a856a26e706a3edad566422a903.css?dl=0/6fdc3a856a26e706a3edad566422a903.css?yakabox-vne-5.21.4-1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css">
<body class="ui-app ui-global-nav ui-app-inverse ui-app-dash  ui-workflow-manager" ui-app-id="39" role="application">
  <div id="ybx-broadcast" style="border: medium none;" class="ui-dialog-content ui-widget-content"></div>
  <div id="ybx-panel" style="display: none;" class="ui-yakabox-panel ui-bootstrap">
    <div class="ui-yakabox-panel-trigger"><a class="ybx-panel-trigger btn btn-primary"><i class="fa fa-fw fa-2x fa-chevron-left"></i></a></div>
    <div class="ybx-panel-panewrapper ui-yakabox-panel-panewrapper ui-background-flat ui-border-none">
      <div class="ybx-panel-contentpane ui-yakabox-panel-content ui-helper-clearfix">
        <div class="ybx-panel-navpane ui-buttonset-navpane btn-group"><button class="ybx-panel-navback ui-corner-all btn btn-link" title="Back"><i class="fa fa-arrow-right fa-rotate-180 fa-fw"></i></button><button class="ybx-panel-navforward ui-corner-right ui-corner-all btn btn-link" title="Forward"><i class="fa fa-arrow-right fa-fw"></i></button></div>
      </div>
    </div>
  </div>
  <nav class="navbar navbar-inverse navbar-fixed-top no-border-radius" id="main_navbar" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button>
        <a class="navbar-brand"...

SCSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);



body {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;    
}

h2 {
font-family: "open sans";
    font-size: 20px;
    color: #fff;
		margin-left:20px
}
#ActivityListItemsCloud li {
  display: inline-block;
  padding: 5px 10px;
  float: left;

 a {
   text-decoration: none;
 }
}

.alert-warning {
    color: #fff;
    background-color: orange;
    border-color: #faebcc;
    border-radius: 2px;
    padding: 11px 10px;
    font-weight: 400;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    transition: all ease-in .2s;
    font-weight:600;
}

.alert-info {
  background: none;
  border-radius:0;
  border-width: 1px  0 0 0 ;
  margin-bottom:0;
  border-color: #ececec;
  
  .fa {
    vertical-align:middle;
    color:#ccc;
    margin-right:5px;
    margin-top:-4px;
  }
}


#ActivityListItemsCloud li:nth-child(odd) {
a {
    color: #05a5d1;
  }
}

#ActivityListItemsCloud li:nth-child(2) {
a {
    color: #05a5d1;
    font-weight:bold;
  }
}

#ActivityListItemsCloud.nav>li>a {
    padding: 5px 5px;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
}
#ActivityListItemsCloud li {
    padding: 0;
}
#ActivityListItemsCloud.nav>li.active>a {
    color:#ffffff;
    background-color: #05a5d1 ;
}

.slide-in-bottom {
	-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-4-18 13:26:42
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
   ...

JavaScript

$(function() {

  var $container = $('#ActivityListItemsCloud').masonry({
    itemSelector: '.ybx-activityui-clouditem',
    columnWidth: 70
  });


  $('.ybx-activityui-clouditem').click(function() {
    var numbers = $('.badge').html();
    var iNum = parseInt(numbers); //Output will be 234.
    $(this).toggleClass('active');



    if ($(this).hasClass('ui-discovered')) {

      if ($(this).hasClass('active')) {
        $('.ybx-subscribe').show();
        $('.ui-mattyg').show('slow');
      } else {
        $('.ybx-subscribe').hide();
        $('.ui-mattyg').hide('slow');
      }
    } else {


      if ($(this).hasClass('active')) {
        $('.ybx-remove').show();
        $('.alert-info:nth-child(odd)').hide('slow')
      } else {

        if ($('#ActivityListItemsCloud').find('li').not($(this)).hasClass('active')) {

          if ($('#ActivityListItemsCloud').find('li.ui-discovered').not($(this)).hasClass('active') && !$('#ActivityListItemsCloud').find('li:not(.ui-discovered)').not($(this)).hasClass('active')) {
            console.log('foo');
            $('.ybx-remove').hide();
          } else {
            $('.ybx-remove').show();
          }
        } else {

          if (!$(this).hasClass('active')) {
            console.log(1);
            $('.ybx-remove').hide();
            $('.alert-info:nth-child(odd)').show('slow')
            $('.badge').html('23');
          }
        }
      }

      if ($(this).hasClass('.active')) {
        $('.badge').html(iNum - 23);
      } else {
        $('.badge').html(iNum + 23);
      }
    }
  });

  $('.ybx-remove').click(function() {
    var $visableAlerts = $('.alert').is('visible')

    $('.active').not('.ui-discovered').addClass('flip-out-hor-top');

    setTimeout(
      function() {
        $('.active').not('.ui-discovered').remove();
      }, 300);

    setTimeout(
      function() {
        $('.alert-info:nth-child(odd)').remove();
      }, 500);

    $('.alert-warning').hide();

    setTimeout(
     ...