JSFiddle - React, Tailwind, and code Playground

by harsh dand

HTML

<div id="searchField">
  <div id="accordion">
    <form role="form">
      <div class="form-inputs search-posts pull-left">
        <input id="searchPosts" type="text" name="add" placeholder="&amp;#xf002; Search for bookmarks..." class="form-control clearable"/>
        <div id="collapseSearch" class="panel-collapse collapse">
          <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
          <div class="filter-checkboxes">
            <label class="checkbox-inline">
              <input id="inlineCheckbox1" type="checkbox" value="option1" autocomplete="off"/>1
            </label>
            <label class="checkbox-inline">
              <input id="inlineCheckbox2" type="checkbox" value="option2" autocomplete="off"/>2
            </label>
            <label class="checkbox-inline">
              <input id="inlineCheckbox3" type="checkbox" value="option3" autocomplete="off"/>3
            </label>
          </div>
        </div>
      </div>
      <div class="form-buttons pull-right"><a data-toggle="collapse" data-parent="accordion" href="#collapseSearch" class="button btn add-more-options">
          <div class="glyphicon glyphicon-chevron-down"></div></a><a id="searchSubmit" type="submit" class="button btn"> 
          <div class="glyphicon glyphicon-search"></div></a></div>
    </form>
  </div>
</div>

CSS

#searchField
  width 100%
  display inline-block
  margin-left auto
  margin-right auto
  margin-top 10px
  -webkit-transition all 300ms ease-out 
  -moz-transition all 300ms ease-out 
  -o-transition all 300ms ease-out 
  transition all 300ms ease-out 
  opacity 1
  #addField
    display none
    &.active
      display block
  #searchField
    display none
    &.active
      display block
form
  .button
    display inline
    font-size 24px
    border none
    padding 0px 20px
    color black
    outline none
    &:hover
      text-decoration none
      cursor pointer
      color #33CCFF
    &.active
      background-color none
  .form-inputs 
    vertical-align baseline
    width 75%
    input
      width 100%
      background-color white
    textarea
      width 100%
      background-color white
  .form-buttons
    text-align left
    width 24%
    white-space nowrap
  .select2-container
    width 100%
    .select2-choices
      border-top-left-radius 0px
      border-top-right-radius 0px
      border-bottom-left-radius 0px
      border-bottom-right-radius 0px
  #title
    border-bottom-left-radius 0px
    border-bottom-right-radius 0px
    &.loading
      background url(/ajax-loader.gif) no-repeat
      background-position center
  #notes, textarea
    width 100%
    border-top-left-radius 0px
    border-top-right-radius 0px
    resize vertical
  .search-posts
    #collapseSearch
      background transparent
      .form-control, .filter-checkboxes
        display inline-block
        width 49.5%
  .select2-input, #searchPosts
    font-family 'FontAwesome'
    font-style normal
  #collapseAdd
    margin-top 2px
  #url
    &.invalid
      box-shadow 0 0 5px 1px #f43841
    &.success
      box-shadow 0 0 5px 1px #00CC99