JSFiddle - React, Tailwind, and code Playground

by Hamed Momeni

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic"></script>
<form action="">
      <label for="name">Name: </label>
      <input type="text" name="name" value="" id="name"/>
      <img class="searchGlass" src="http://www.arioo.com/theme/frontend/arioo/style/arioo/images/top-icons.png" alt="search glass">
      <label for="email">Email: </label>
      <input type="text" name="email" value="" id="email"/>
      <label for="phone">Phone: </label>
      <input type="text" name="phone" value="" id="phone"/>
      <label for="message">Message: </label>
      <textarea type="text" name="message" value="" id="message" rows="10" cols="10"></textarea>
      <input type="submit" name="submit" value="Submit"/>
 </form>

CSS

label {
           display: block;
           font-family: 'Open Sans', sans-serif;
           font-size: 13px;
           color: #4d5357;               
      }

      input[type=text], textarea {
           width: 452px;
           height: 20px;
           border: 1px solid #a6a9ab;
           color: #4d5357;
           font-size: 13px;
           padding: 5px 0 5px 5px;
           font-family: 'Open Sans', sans-serif;
      }
      textarea {
           height: 212px;
      }
      img.searchGlass {
           position: relative;
           top: 8px;
           left: 0px;
           border: 1px solid #a6a9ab;
           border-bottom: 3px solid #a6a9ab;
      }
      img.searchGlass:active {
           position: relative;
           top: 8px;
           left: 0px;
           border: 1px solid #a6a9ab;
           border-bottom: none;
           margin-top: 3px;
      }