JSFiddle - React, Tailwind, and code Playground

Report Plugin Overlay

by Hugo Carneiro

HTML

<div id="widget-content">
  <div class="container" id="widget-form-container">
    <div class="row row-content">
      <!-- Nav Tabs -->
      <ul class="nav nav-stacked col-xs-3 nav-pills">
        <li class="active"> <a href="#config-report" data-toggle="tab" id="toggle-config-report">Configure report</a>
        </li>
      </ul>
      <!-- End of Nav Tabs -->
      <!-- Tab Panes -->
      <div class="tab-pane active" id="config-report">
        <div class="tab-content col-xs-9">
          <div class="form-horizontal">
            <div class="tab-pane-header">
              <h3>Configure your report</h3>
              <p>Select the form you would like to use to populate your report.</p>
            </div>
            <div class="tab-pane-content">
              
              <div class="form-group">
                <div class="col-xs-4 control-label">
                  <label for="report_title">Report title</label>
                </div>
                <div class="col-xs-8">
                  <input type="text" class="form-control" name="report-title" id="report_title" placeholder="Enter report title">
                </div>
              </div>
              
              <div class="form-group">
                <div class="col-xs-4 control-label">
                  <label>Which form would you like to select?</label>
                </div>
                <div class="col-xs-8">
                  <select class="form-control">
                    <option selected>— Select a form —</option>
                    <optgroup label="Section One - Screen X">
                      <option>Form One</option>
                      <option>Form Two</option>
                    </optgroup>
                    <optgroup label="Section Two - Screen Z">
                      <option>Form One</option>
                      <option>Form Two</option>
                    </optgroup>
                  </select>
                </div>
              </div>
             ...

CSS

/*************************
 *
 *	Document    : Fliplet Widget Styles
 *	Created on  : Jun 23, 2011, 5:44:22 PM
 *	Author      : Weboo
 *	Description : Fliplet Widget Styles
 *
 ************************/


/***********************/


/*       IMPORTS       */


/***********************/

@import url(http://fonts.googleapis.com/css?family=Dosis:200,400,700|Open+Sans:300italic,400italic,700italic,400,300,700&subset=latin,latin-ext);
html,
body {
  min-height: 100%;
  word-wrap: break-word;
}

* {
  -webkit-font-smoothing: antialiased;
}


/* ---------------------------------------------------------------------------------------------------------- 
01 Padding-less columns -------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .col-xs-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .col-sm-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .col-md-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 1200px) {
  .col-lg-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* Section: Legacy consistency */

.btn {
  vertical-align: middle;
  height: 2.6979166667em;
  line-height: 2.6979166667em;
  padding: 0 0.833333em;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  margin: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border-width: 1px;
}

.btn-default {
  color: #333;
  text-decoration: none;
  background: #f1f1f1;
  background: -moz-linear-gradient(top, #fafafa 0%,...