JSFiddle - React, Tailwind, and code Playground

by srinivaspotluri

HTML

<div class="controller">
  <div id="findbylocationofficeDiv">
    <div id="findbylocationdiv">
      <label for="reg-work-location" id="searchlocationLabel" class="searchlocationLabel">Search branches by location</label>
      <input type="text" id="reg-work-location" placeholder="i.e., New York, NY" />
    </div>
    <div id="findbyofficeDiv">
      <label for="reg-office-id" id="searchofficeLabel">Search by Office Id</label>
      <input type="text" id="reg-office-id" placeholder="i.e. 12345" />
    </div>

  </div>
  
</div>

CSS

body {
  font-size: 1rem;
  line-height: 1.375rem;
  letter-spacing: -.5px;
}

.controller {
  margin-left: .75rem;
  margin-right: .75rem;
  display: table;
}

#findbylocationofficeDiv {
  width: 55%;
  position: relative;
  min-height: 1px;
  padding-left: .75rem;
  padding-right: .75rem;
  float: left;
  perspective: 1000px;
}

.controller:hover #findbylocationofficeDiv,
.controller.hover #findbylocationofficeDiv {
  transform: rotateY(180deg);
}

#findbylocationofficeDiv {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
#findbylocationdiv, #findbyofficeDiv {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

#findbylocationdiv {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
#findbyofficeDiv {
	transform: rotateY(180deg);
}
.searchlocationLabel {
  font-weight: bolder;
  position: relative;
  font-size: 1.1375rem;
  line-height: 1.5;
  border: none;
  cursor: pointer;
  margin-bottom: 5px;
  letter-spacing: -.5px;
  color: #3a4449;
}

#searchofficeLabel {
  font-weight: bolder;
  position: relative;
  font-size: 1.1375rem;
  line-height: 1.5;
  border: none;
  cursor: pointer;
  margin-bottom: 5px;
  letter-spacing: -.5px;
  color: #3a4449;
}

#reg-work-location {
  margin-bottom: 0.3rem;
  width: 100%;
  cursor: pointer;
  border-radius: .4rem;
  border: 1px solid #dad9d9;
  box-shadow: none;
  box-sizing: border-box;
  display: block;
  height: 42px;
  line-height: 2rem;
}

#reg-office-id {
  margin-bottom: 0.3rem;
  width: 100%;
  cursor: pointer;
  border-radius: .4rem;
  border: 1px solid #dad9d9;
  box-shadow: none;
  box-sizing: border-box;
  display: block;
  height: 42px;
  line-height: 2rem;
}

.button-col {
  width: 16.66667%;
  position: relative;
  min-height: 1px;
  padding-left: .75rem;
  padding-right: .75rem;
  font-size: 1rem;
  line-height: 1.375rem;
  letter-spacing: -.5px;
}

.button-para {
  margin-bottom: 6px;
  font-size: 1rem;
 ...