JSFiddle - React, Tailwind, and code Playground

New App Banner

by Dug Sohn

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.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/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/jquery.sidr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.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/animate.css/3.7.0/animate.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"...

SCSS

.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;

}
.ui-eight > .row {
	    background-image: -webkit-linear-gradient(top left, #D91B5C 0%, #993F98 100%);
    background-image: linear-gradient(to bottom right, #D91B5C 0%, #993F98 100%);
    color: #ffffff;

}


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


.ui-yakabox-appNav > div >  div:nth-child(1) {
  //  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, purple 50%, #D91B5C 80% );
    color: #ffffff;
      height:225px;
}


.navbar .navbar-nav>li.dropdown-wide>.dropdown-menu, .navbar .navbar-nav>li.dropdown-full>.dropdown-menu {
    left: 0;
    right: 0;
    padding: 0;
    margin-left: 0px;
    margin-right: 0px;
    border-radius: 0;
}
.ui-yakabox-appNav {
  padding:20px;
  
  &.container-fluid {
    padding:0 !important;
  }

.ui-thumb {
  display:block;
  margin-right:20px;
  text-align:center;
  
 .bg-primary .badge{
    position:absolute;
    right:40% !important;
    color: #fff !important;
    right: 41%;
    /*...

JavaScript

$('#singleApp').on('click', function() {
$('.ui-eight').hide();

$('.ui-yakabox-appNav > div >  div:nth-child(2)').hide();
$('.ui-yakabox-appNav > div >  div:nth-child(1)').removeClass('col-sm-6');
$('#main_navbar > .container-fluid').addClass('hide_gloabal');
});

$('#doubleApp').on('click', function() {
$('.ui-eight').hide();
$('.ui-two').show();
$('.ui-yakabox-appNav > div >  div:nth-child(2)').show();
$('.ui-yakabox-appNav > div >  div:nth-child(1)').addClass('col-sm-6');
$('#main_navbar > .container-fluid').removeClass('hide_gloabal');
});


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

$('.ui-eight').show();
$('.ui-two').hide();

});