JSFiddle - React, Tailwind, and code Playground

New App Banner

by DugSohn

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.1/tinymce.min.js"></script>
<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://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.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...

SCSS

#sortable .ui-shakeit {
    animation-delay: -.5s;
    animation-duration: .3s;
    animation-name: keyframes1;
    animation-iteration-count: infinite;
    transform-origin: 50% 10%;
    
}
 
#sortable .ui-shakeit:nth-child(2) {
    animation-name: 'keyframes2';
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: 30% 5%;
}

@keyframes keyframes1 {
    0% {
        transform: rotate(-1deg);
        animation-timing-function: ease-in;
    }
    50% {
        transform: rotate(1.5deg);
        animation-timing-function: ease-out;
    }
}
 
@keyframes keyframes2 {
    0% {
        transform: rotate(1deg);
        animation-timing-function: ease-in;
    }
    50% {
        transform: rotate(-1.5deg);
        animation-timing-function: ease-out;
    }
}

  



.ui-yakabox-appNav {
  //  background-image: -ms-linear-gradient(top left, #D91B5C 0%, #993F98 100%);
  //  background-image: -moz-linear-gradient(top left, #D91B5C 0%, #993F98 100%);
 //   background-image: -o-linear-gradient(top left, #D91B5C 0%, #993F98 100%);
  //  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #D91B5C), color-stop(100, #993F98));
    background-image: -webkit-linear-gradient(top left, #D91B5C 0%, #993F98 100%);
    background-image: linear-gradient(to bottom right, #D91B5C 0%, #993F98 100%);
    color: #ffffff;
      height:225px;
      display:flex;
      flex-direction: column;
      
      .row {
        
  //      display: flex;
  //  flex-direction: row;
  //      flex: 1 0 0;

      }
      

}
.ui-eight   {
	    background-image: -webkit-linear-gradient(top left, #D91B5C 0%, #993F98 100%);
    background-image: linear-gradient(to bottom right, #D91B5C 0%, #993F98 100%);
    color: #ffffff;
		height:450px !important;
  div > div:nth-child(1) {
  	background-image:none !important;
  }
li {
  height:225px;
  overflow: hidden;
}

}


.ui-yakabox-appNav > div >  div {
  padding-top:10px;
}





.navbar...

JavaScript

$('#singleApp').on('click', function() {
$('.open .dropdown-menu > div').hide();

$('.ui-single').show();
});

$('#doubleApp').on('click', function() {
$('.open .dropdown-menu > div').hide();
$('.ui-two').show();
});


$('#twoRowsApp').on('click', function() {
$('.open .dropdown-menu > div').hide();
$('.ui-eight').show();

});

$('#twoRowsApp').on('click', function() {
$('.open .dropdown-menu > div').hide();
$('.ui-eight').show();


});



$('#twoRowsManyApps').on('click', function() {

$('.open .dropdown-menu > div').hide();
$('.ui-sixteen').show();

});


$('#setprefs').on('click', function() {


$(this).parent().find('.ui-thumb ').parent().toggleClass('ui-editcontrols');

$(this).parent().find('.ui-thumb').toggleClass('ui-shakeit');


$("#sortable" ).sortable({
  classes: {
    "ui-sortable": "highlight"
  },  
  appendTo: document.body,
    containment: "parent",
    cursor: "move",
    cursorAt: { left: 50, top:50 },
    distance: 50,
    opacity: 0.85,
    tolerance: 'pointer',
    connectWith: '#sortable'


});

});