JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<ul class="app_container_T t_ul" id="resizable">
    <li>
        <ul class="menu_T t_ul">
            <li>
                <button class="large_menu_button_T">+</button>
                <button class="large_menu_button_T">T</button>
                <button class="small_menu_button_T options">o</button>
            </li>
        </ul>
    </li>
    <li>
        <ul class="container_element_T t_ul resizableui-widget-content" id="1">
            <li class="content_header_T">
                <button class="t_intect_button close_button_T">-</button>
                <form name="search_form" class="search_form_T">
                    <input type="text" name="search_input" class="search_bar_T"></input>
                    <button class="search_button_T" name="search_button" onclick="add_timeline_element">🔍</button>
                </form>
            </li>
            <li class="content_container_T">
                <button value="Timeline" id="1" class="content_selection_button_T">Timeline</button>
                <button value="Relevent" id="1" class="content_selection_button_T">Relevent</button>
                <button value="Mentions" id="1" class="content_selection_button_T">Mentions</button>
            </li>
        </ul>
    </li>
    <li class="container_T">
        <button class="t_intect_button close_button_T">-</button>
        <textarea class="text_area_T" warp="hard" placeholder="place holder"></textarea>
        <button value="Add Photo" class="composition_button_T photo_button_T"></button>
        <button value="Add Location" class="composition_button_T location_button_T"></button>
        <textarea class="word_count_T"></textarea>
        <button value="Undo: Off" class="composition_button_T Undo_button_T"></button>
        <button value="Submit" class="composition_button_T send_button_T"></button>
    </li>
</ul>

CSS

/*------------------------------------------------------------------------------------*/
  /*----Bar---*/
  /*------------------------------------------------------------------------------------*/
  .app_container_T {
      position:fixed;
      bottom: 0px;
      left:0px;
      z-index: 998;
      padding: 0px;
      height: 150px;
      box-sizing: border-box;
  }
  .app_container_T > li {
      /*create a class for them to share itll be faster, like t_ul*/
      display: inline-block;
      height: 100%;
  }
  .t_ul {
      list-style: none;
  }
  .app_container_T * {
      box-sizing: border-box;
      border-radius:5px;
      vertical-align: text-bottom;
  }
  /*------------------------------------------------------------------------------------*/
  /*----Menu---*/
  /*------------------------------------------------------------------------------------*/
  .menu_buffer {
      width: 60px;
  }
  .menu_T {
      background-color:lightblue;
      padding: 0px;
      width:60px;
      height: 100%;
  }
  .large_menu_button_T {
      background: #0016f0;
      color: #ffffff;
      height: 50px;
      width: 50px;
      margin: 3px;
      font-size: 20px;
      border-radius:10px;
  }
  .small_menu_button_T {
      background: #002aa9;
      color: #ffffff;
      height: 20px;
      width: 20px;
      margin: 1px;
      font-size: 12px;
  }
  .options {
      margin-left: 26px;
  }
  /*-------------------------------------------------------------------------------------*/
  /*Selection Element*/
  /*------------------------------------------------------------------------------------*/
  .container_element_T {
      background-color:red;
      padding: 5px;
      height: 100%;
      width: 325px;
  }
  .content_header_T {
      position: relative;
      width: 100%;
      height: 35px;
  }
  .content_header_T > * {
      position: relative;
  }
  .close_button_T {
      width: 20px;
      height: 20px;
      display: inline-block;
      padding: 0;
      margin:...