JSFiddle - React, Tailwind, and code Playground

App Banner Drop-down Menu Option

by Meredith Crow

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/css/scss/themes/darkly/ui_dark.css">
<link rel="stylesheet" href="boothttps://yakabod.yakabox.com/css/scss/bootstrap.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/yakabox5.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/themes/app/ui.theme.banner.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<div class="ui-yakabox-makerspace">
	<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://i.imgur.com/OMkVItB.png" class="img-responsive"> <span class="bold text-white">Yakabox</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 id="ybx-yakabox-site-search">
            <div data-reactroot="" class=" undefined">  
              <div class="ui-yakabox-searchBox ui-helper-clearfix">
                <form>
                 ...

SCSS

.ui-yakabox-makerspace {

	.ui-yakabox-banner {
  	background: url("https://i.imgur.com/NBKzua0.gif") center no-repeat;
  	background-size: cover;
		margin-top: 50px;
		height: 345px;
	}
	.navbar {
		min-height: 20px;
		border-radius: 0px;
		margin-bottom: 0px;
	}
	#footer {
		background-color: #52555b;
		padding: 20px;
		color: #ffffff;
	}
	.col-md-4 {
		padding: 40px;
		text-align: center;
		margin: auto;
	}
	.col-md-8 {
		padding: 0px 40px 40px 40px;
		text-align: left;
	}
	
}