Added shadow, proper padding along with highlight

package.json

@@ -37,6 +37,9 @@
   },
   "dependencies": {
     "@babel/preset-env": "^7.5.4",
+    "@fortawesome/fontawesome-svg-core": "^1.2.27",
+    "@fortawesome/free-solid-svg-icons": "^5.12.1",
+    "@fortawesome/react-fontawesome": "^0.1.9",
     "axios": "^0.19.0"
   }
 }

src/App.css

@@ -1,19 +1,51 @@
 .error {
   border: red 2.7px solid;
+  src: url(/src/images/tick.png);
+
 }
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
-  margin: 0;
+   margin: 0;
+
 }
 
 /* Firefox */
 input[type=number] {
   -moz-appearance: textfield;
+
+
+
 }
 
 .error-display{
   color: red;
   font-size: 14px;
-}
+
+}
+
+.styles
+{
+
+     box-sizing: border-box;
+      display: block;
+      border-color: #3f72af;
+      padding: 20px;
+      width: 300px;
+      margin: 40px auto;
+      font-size: 18px;
+      outline: none;
+      text-align: center;
+      box-shadow:inset 0 0 5px 5px ghostwhite;
+      text-transform: uppercase;
+      background-color:#bbded6;
+
+}
+input:focus
+{
+	background-color: white;
+	outline: none;
+  border: 3px solid rgba(81, 203, 238, 1);
+}
+

src/index.js

@@ -1,10 +1,11 @@
 import React, { Component } from "react";
 import axios from "axios";
 import "./App.css";
+
 class Pincode extends Component {
   constructor(props) {
     super(props);
-
+  
     this.state = {
       pincode: "",
       city: "",
@@ -50,8 +51,9 @@ class Pincode extends Component {
         {this.state.error ? (
           <span className="error-display">{this.state.error}</span>
         ) : null}
+
         <div style={this.props.pincodeContainer}>
-          <input
+          <input className='styles'
             maxLength={6}
             minLength={6}
             onChange={e => this.onChange(e)}
@@ -64,7 +66,7 @@ class Pincode extends Component {
           />
         </div>
         <div style={this.props.cityContainer}>
-          <input
+          <input className='styles'
             type="String"
             disabled={true}
             placeholder="City"
@@ -73,7 +75,7 @@ class Pincode extends Component {
           />
         </div>
         <div style={this.props.stateContainer}>
-          <input
+          <input className='styles'
             type="String"
             placeholder="State"
             disabled={true}