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="/activityViewer"><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;
transistion: 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-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;
}
  
  
  
  
  
  /* ----------------------------------------------
 * Generated...

JavaScript

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');

});

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

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

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

})