JSFiddle - React, Tailwind, and code Playground

by clayshannon

HTML

<h1 class="alignCenter">ACME Restaurants</h1>
<select class="leftMargin">
  <option value="dc1">Distribution Center</option>
  <option value="dc2">Distribution Center 2</option>
  <option value="dc3">Distribution Center 3</option>
  <option value="dc4">Distribution Center 4</option>
</select>
<select class="leftMargin">
  <option value="cop1">Class of Product</option>
  <option value="cop2">Class of Product 2</option>
  <option value="cop3">Class of Product 3</option>
  <option value="cop4">Class of Product 4</option>
</select>
<br/>
<br/>
<label class="leftMargin">Compare this date range:</label>
<br/>
<br/>
<label class="leftMargin">from </label>
<input type="date">
<label>to </label>
<input type="date">
<br/>
<br/>
<label class="leftMargin">...to this date range:</label>
<br/>
<br/>
<label class="leftMargin">from </label>
<input type="date">
<label>to </label>
<input type="date">
<br/>
<br/>
<button type="button" class="bigMargin button">Generate Report</button>
<br/>
<br/>
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>

CSS

h1 {
  font-family: Candara, Georgia, serif;
}

.alignCenter {
  text-align: center;
}

.leftMargin {
  margin-left: 2cm;
}

.bigMargin {
  margin-left: 4.5cm;
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

.squishedbutton {
  border: none;
  margin-left: 0cm;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}