JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

<div class="select-container">
  <select name="planner-line" class="form-control">
    <option value="default" select="selected">Select a planner</option>
    <option value="classic-undated" select="selected">Classic Undated</option>
    <option value="foundations" select="selected">Foundations</option>
    <option value="esteem" select="selected">Esteem</option>
  </select>
</div>

CSS

.select-container {
  padding: 10px;
}
.form-control { 
  display: block; 
  width: 450px; 
  height: 44px;
  -webkit-padding-start: 20px;
  -webkit-padding-end: 20px;
  padding: 20px 24px; 
  font-size: 14px; 
  line-height: 2.5; 
  color: #555555; 
  background-color: #fff; 
  background-image: none; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 
  }
.form-control:focus { 
  border-color: #66afe9; 
  outline: 0; 
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
  }
.form-control::-moz-placeholder { color: #999; opacity: 1; }
.form-control:-ms-input-placeholder { color: #999; }
.form-control::-webkit-input-placeholder { color: #999; }
.form-control::-ms-expand { border: 0; background-color: transparent; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: #eeeeee; opacity: 1; }
.form-control[disabled], fieldset[disabled] .form-control { cursor: not-allowed; }