JSFiddle - React, Tailwind, and code Playground

by chrischilcoat

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="row">
    <div class="col-sm-2">
      img 
    </div>
    <div class="col-sm-7">
      <h1>Product Backlog</h1>
      <p>This is an app description.</p>   
    </div>
    <div class="col-sm-3">
      <button class="btn btn-block btn-primary">Visit App</button>
    </div>
    <div class="ui-yakabox-banner-editor" >
      <button class="btn btn-">Visit App</button>
    </div>
  </div>
  <div class="row">
    <div class="col">

    </div>
  </div>  
</div>

SCSS

body {
  font-family: avenir;
  background-color: #fff;
}

.container {
  position:relative;
  height:300px;
  padding-top:30px;
}
.ui-yakabox-banner-editor {
  position:absolute;
  left:10px;
  bottom:10px;
  background:rgba(0,0,0,.8);
  width:75%;
}

JavaScript

$(document).ready(function(){
  
  $(".dropdown").on("hide.bs.dropdown", function(){
  });
  
  $(".dropdown").on("show.bs.dropdown", function(){
  });
  
  
  $(".dropdown-menu").click(function(e){
    e.preventDefault();
    e.stopPropagation();
  });
  
  $("#dropdownMenuButton").on('click', function(){
    alert('click');
  });
   
  
  $(window).click(function() {
  //Hide the menus if visible
  });

  $('#menucontainer').click(function(event){
      event.stopPropagation();
  });

  
});