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">
<script src="jquery.sidr.light.js"></script>
<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...

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

$('.block_list .fa-chevron-down').click(function() {
  var $this = $(this),
    $thisContainer = $this.closest('.block_list');

  $thisContainer.find('ul').hide();
  $this.hide();
  $thisContainer.find('.fa-chevron-right').show();
  $thisContainer.find('.badge').show();

  $thisContainer.find('.ybx-widget-header').next().find('li').removeClass('ui-state-highlight');

});


$('.block_list .fa-chevron-right').click(function() {
  var $this = $(this),
    $thisContainer = $this.closest('.block_list');
   

  $thisContainer.find('.fa-chevron-down').show();
  $thisContainer.find('ul').show();
  $this.hide();
  $thisContainer.find('.badge').hide();
  $thisContainer.find('.ybx-widget-header').removeClass('ui-pulse');
  $thisContainer.find('.ybx-widget-header').removeClass('ui-state-highlight');


});


$('.btn-load').click(function() {
   var $container = $('.block_list');


    $container.each( function() {
         var $this = $(this);

          if ($this.find('.fa-chevron-right').is(':visible'))  { 
          $this.find('.ybx-widget-header').addClass('ui-pulse');
          $this.find('.ybx-widget-header').addClass('ui-state-highlight');
          }
     });


    var $badgeCount =   $('body').find('.ybx-widget-header').find('.badge');
 $badgeCount.html("8");
     
  
   
   
   $('body').find('.ui-new-item').slideDown('slow');
   $('body').find('.ui-new-item').addClass('ui-state-highlight');
  


});


$('.btn-refresh').click(function() {


    var $badgeCount =   $('body').find('.ybx-widget-header').find('.badge');
 $badgeCount.html("7");

  $('body').find('.ybx-widget-header').removeClass('ui-pulse');
  $('body').find('.ybx-widget-header').removeClass('ui-state-highlight');
     $('body').find('.ui-new-item').hide();
   $('body').find('.ui-new-item').removeClass('ui-state-highlight');

});