JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by DugSohn

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/137de011e0fc2440ce11c99272733d49.css?yakabox-vne-5.17.8-1">
<body class="ui-app ui-global-nav ui-app-inverse ui-app-dash  ui-workflow-manager" ui-app-id="39" role="application">
  <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" href="#STAY" tabindex="0"><img src="https://yakabod.yakabox.com/images/yakaboxHeaderLogo.png" class="img-responsive" > <span class="bold text-white">Yakabod</span></a> </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav navbar-left">
          <li class="ui-yakabox-globalnav-search-lg navbar-form-expanded navbar-form navbar-left visible-lg-block visible-md-block visible-xs-block" role="search">
            <div class="ui-yakabox-searchBox  ui-helper-clearfix">
              <form onsubmit="return false;">
                <div class="input-group  bias-input-group" style="padding-top:3px;">
                  <input class="ybx-searchBox-text form-control input-sm" placeholder="Enter Keywords">
                  <div class="ybx-searchBox-wrapper input-group-btn bs-dropdown-to-select-group">
             ...

SCSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300, 600');

svg text {font-family: 'Open Sans Condensed', sans-serif;
}

body.ui-global-nav {
background-image:   url('http://mike.teczno.com/img/osm-terrain/Background1.jpg');
background-size:cover;
}

.proto-node-container {
  position:relative;
  display: inline-block;

    .badge { 
     position: absolute;
    font-size: 20px;
    top: 20px;
    left: 24px;
    background:none;
    
      
    }
    
     .badge_hover .cls-red {
       fill:#fff;
       transistion: all ease 2s;
      
    }
    
        .badge_hover text{
fill:red;
          text-replace: none;        sistion: all ease 2s;
      
    }
  
   

 .node_img {
      height:158px;
      width:128px;
      background:  url('https://dl.dropbox.com/s/pw7amczuslofp1e/Tunnel_Node%402x.png?dl=0');
      }
          
} 
.proto-explode-icons  {
     position: absolute;
    z-index: 2;
    top: -100px;
    right: 10px;
    width:110px;
}

.proto-explode-icons > svg {
  display:none;
  z-index:2;
}


  .proto-node-ip-list {
  
  display: none;
  position:absolute;
  bottom:0;
 
  
  
  
  }

  .proto-node-container:hover,   .proto-node-container:focus { 
  
  .proto-node-ip-list {
  
    display: inline-block;
    top: 120px;
    right: 0px;

    
    ul {

    border-radius: 7px;
background-color: rgba(0,0,0,.7);
color:#fff;
  padding:10px;
  border-color:#ececec;
   
   li{
   
   a, a:link, a:visited {
     color:#fff;
     padding:2px 10px;
   
   &:hover {
     color: black;
   }
   
   }
   }
   }
    
  }
  
  
  .node_img {
      height:158px;
      width:128px;    
      background:  url('https://dl.dropbox.com/s/3xxbo0vfyn0f91y/Tunnel_Node%402x_hover.png?dl=0');
      cursor:pointer;
}  
}

.slide-in-blurred-bottom {
	-webkit-animation: slide-in-blurred-bottom 0.2s cubic-bezier(0.230, 1.000, 0.320, .300) both;
	        animation: slide-in-blurred-bottom 0.2s cubic-bezier(0.230, 1.000, 0.320, .300) both;
}
  
  
  
  
  
 ...

JavaScript

P'JO	var children = [];
	buildArray();



	function fadeThemOut(children) {
	  $(".proto-explode-icons").children().each(function(index) {
	    $(this).fadeOut("fast");
	  });

	}

	function fadeThemIn(children) {

	  if (children.length > 0) {
	    var currentChild = children.shift();
	    $(currentChild).show('fast', function() {
	      fadeThemIn(children);
	    });
	  }

	}


	function buildArray() {
	  $(".proto-explode-icons").children().each(function() {
	    children.push(this);
	  });
	}

	function invertBadge() {
	  $('.badge').addClass('badge_hover');
	}


	$('.badge').mouseleave(function() {
	  fadeThemOut(children);
	  buildArray();
	  $('.badge').removeClass('badge_hover');

	});
  
  $('.proto-explode-icons').focusout(function() {
     
     console.log('focusout');
});

  $('.proto-explode-icons').focusin(function() {

     console.log('focusin');
});



	

	$('.badge').mouseenter(function() {
	  var $this = this;
	  fadeThemIn(children);
	  invertBadge();
	});

	$('.badge').focus(function() {
	  var $this = this;
	  fadeThemIn(children);
	  invertBadge();
	});


	$('.pick_me').click(function() {
	  var $this = $(this),
	    $text = $this.text();

	  alert("Send " + $text + " to Form IP Field");

	})

	document.onkeyup = PresTab;

	function PresTab(e) {
	  var keycode = (window.event) ? event.keyCode : e.keyCode;
	  if (keycode == 9)
	    console.log(document.activeElement);
	}