JSFiddle - React, Tailwind, and code Playground

Scratchpad

by DugSohn

HTML

<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.2.5/tinymce.min.js"></script>
<div class="container-fluid ui-yakabox-6-preview ">
  <div class="ui-yakabox-profile">
    <h1>New Post Button</h1>
    <div class="row">
      <div class="col-3 col-xs-12 col-sm-3 ui-yakabox-flexcontainer">
        <h4 style="flex-grow: 0; height: 30px;">Team Boards </h4>
        <div class="ui-yakabox-messages-groups ui-yakabox-flexcontainer" style="flex-grow: 1;">
          <div class="ui-message-widget  ui-yakabox-flexcontainer" style="flex-grow: 1; overflow: hidden;">
            <div class="panel panel-default ui-yakabox-message-panel ui-yakabox-flexcontainer" data-atf-element="" style="flex-direction: column; overflow: hidden; flex-grow: 1;">
              <ul class="nav nav-pills hidden-xs">
                <li class=" active"><a href="#stay" data-atf-element="">Recent</a></li>
                <li class=""><a href="#stay" data-atf-element="">Unread</a></li>

                <li class="pull-right"><a class="btn btn-lg btn-primary btn-xs " id="new_post"><i class="fa fa-plus"></i> Post</a>
                  <select id="team_typeahead" class="pull-right form-control col-xs-2" style="display:none; width:312px; border-radius:10px">
                    <option>Pick a Team</option>
                    <option>App Factory</option>
                    <option>Dev Team</option>
                    <option>Foo Bar</option>
                  </select></li>
              </ul>
              <div class="ui-yakabox-flexcontainer" style="flex-grow: 1; flex-shrink: 1;">
                <div class="list-group" style="height: 50px; overflow: auto; flex-grow: 1;...

SCSS

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



body {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;    
}

/* line 418, ../../cooking/html/css/scss/yakabox/_ui-yakabox-profile.scss */
.ui-yakabox-6-preview .ui-yakabox-profile .ui-message-widget * {
    border: none
}

/* line 421, ../../cooking/html/css/scss/yakabox/_ui-yakabox-profile.scss */
.ui-yakabox-6-preview .ui-yakabox-profile .panel-default {
    border: none;
    border-radius: 8px
}

/* line 425, ../../cooking/html/css/scss/yakabox/_ui-yakabox-profile.scss */
.ui-yakabox-6-preview .ui-yakabox-profile .ui-message-widget .panel-default {
    background: none;
    box-shadow: none
}

/* line 429, ../../cooking/html/css/scss/yakabox/_ui-yakabox-profile.scss */
.ui-yakabox-6-preview .ui-yakabox-profile .btn-xs,.ui-yakabox-6-preview .ui-yakabox-profile .btn-group-xs>.btn {
    border-radius: 8px;
    border: none
}

/* line 433, ../../cooking/html/css/scss/yakabox/_ui-yakabox-profile.scss */
.ui-yakabox-6-preview .ui-yakabox-profile .nav.nav-pills,.ui-yakabox-6-preview .ui-yakabox-profile .ui-yakabox-profile-buttonBar-row,.ui-yakabox-6-preview .ui-yakabox-profile h4.visible-lg {
    background: rgba(0,0,0,0.05);
    margin-bottom: 10px;
    border-radius: 10px
}

/* line 440, ../../cooking/html/css/scss/yakabox/_ui-yakabox-profile.scss */
.ui-yakabox-6-preview .ui-yakabox-profile h4.visible-lg {
    padding: 10px 8px
}

/* line 443, ../../cooking/html/css/scss/yakabox/_ui-yakabox-profile.scss */
.ui-yakabox-6-preview .ui-yakabox-profile .nav.nav-pills a:first-of-type {
    border-radius: 10px
}

/* line 446, ../../cooking/html/css/scss/yakabox/_ui-yakabox-profile.scss */
.ui-yakabox-6-preview .ui-yakabox-profile .ui-message-widget .panel-default div {
    border-radius: 10px
}

/* line 449, ../../cooking/html/css/scss/yakabox/_ui-yakabox-profile.scss */
.ui-yakabox-6-preview .ui-yakabox-profile .btn-block {
   ...

JavaScript

$('#new_post').click( function() {
var $this = $(this);

$this.hide();
$('#team_typeahead').show();
$('.nav-pills li:not(:last-child)').hide();


});

$('#team_typeahead').change(function() {
     var  $this = $(this),
     $sSelected = $this.val();
     
     alert("open panel with new Post for " + $sSelected );
        // Do something for option "b"
        $('#team_typeahead').hide();
        $('.nav-pills li').show();

$('#new_post').show();

 });