Merge pull request #118 from rahuldkjain/issue-112

[fix]: remove border outline from input on focus

src/components/social.js

@@ -16,7 +16,7 @@ const Social = props => {
           <input
             id="github"
             placeholder="github username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 sm:px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 sm:px-2 focus:border-blue-700"
             value={props.social.github}
             onChange={event => props.handleSocialChange("github", event)}
           />
@@ -30,7 +30,7 @@ const Social = props => {
           <input
             id="twitter"
             placeholder="twitter username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.twitter}
             onChange={event => props.handleSocialChange("twitter", event)}
           />
@@ -44,7 +44,7 @@ const Social = props => {
           <input
             id="dev"
             placeholder="dev.to username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.dev}
             onChange={event => props.handleSocialChange("dev", event)}
           />
@@ -58,7 +58,7 @@ const Social = props => {
           <input
             id="codepen"
             placeholder="codepen username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.codepen}
             onChange={event => props.handleSocialChange("codepen", event)}
           />
@@ -72,7 +72,7 @@ const Social = props => {
           <input
             id="codesandbox"
             placeholder="codesandbox username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.codesandbox}
             onChange={event => props.handleSocialChange("codesandbox", event)}
           />
@@ -86,7 +86,7 @@ const Social = props => {
           <input
             id="stackoverflow"
             placeholder="stackoverflow user ID"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.stackoverflow}
             onChange={event => props.handleSocialChange("stackoverflow", event)}
           />
@@ -100,7 +100,7 @@ const Social = props => {
           <input
             id="linkedin"
             placeholder="linkedin username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.linkedin}
             onChange={event => props.handleSocialChange("linkedin", event)}
           />
@@ -114,7 +114,7 @@ const Social = props => {
           <input
             id="kaggle"
             placeholder="kaggle username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.kaggle}
             onChange={event => props.handleSocialChange("kaggle", event)}
           />
@@ -128,7 +128,7 @@ const Social = props => {
           <input
             id="fb"
             placeholder="facebook username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.fb}
             onChange={event => props.handleSocialChange("fb", event)}
           />
@@ -142,7 +142,7 @@ const Social = props => {
           <input
             id="instagram"
             placeholder="instagram username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.instagram}
             onChange={event => props.handleSocialChange("instagram", event)}
           />
@@ -156,7 +156,7 @@ const Social = props => {
           <input
             id="dribbble"
             placeholder="dribbble username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.dribbble}
             onChange={event => props.handleSocialChange("dribbble", event)}
           />
@@ -170,7 +170,7 @@ const Social = props => {
           <input
             id="behance"
             placeholder="behance username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.behance}
             onChange={event => props.handleSocialChange("behance", event)}
           />
@@ -184,7 +184,7 @@ const Social = props => {
           <input
             id="medium"
             placeholder="medium username (with @)"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.medium}
             onChange={event => props.handleSocialChange("medium", event)}
           />
@@ -198,7 +198,7 @@ const Social = props => {
           <input
             id="youtube"
             placeholder="youtube channel name"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.youtube}
             onChange={event => props.handleSocialChange("youtube", event)}
           />
@@ -212,7 +212,7 @@ const Social = props => {
           <input
             id="codechef"
             placeholder="codechef username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.codechef}
             onChange={event => props.handleSocialChange("codechef", event)}
           />
@@ -226,7 +226,7 @@ const Social = props => {
           <input
             id="hackerrank"
             placeholder="hackerrank username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.hackerrank}
             onChange={event => props.handleSocialChange("hackerrank", event)}
           />
@@ -240,7 +240,7 @@ const Social = props => {
           <input
             id="codeforces"
             placeholder="codeforces username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.codeforces}
             onChange={event => props.handleSocialChange("codeforces", event)}
           />
@@ -254,7 +254,7 @@ const Social = props => {
           <input
             id="leetcode"
             placeholder="leetcode username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.leetcode}
             onChange={event => props.handleSocialChange("leetcode", event)}
           />
@@ -268,7 +268,7 @@ const Social = props => {
           <input
             id="topcoder"
             placeholder="topcoder username"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.topcoder}
             onChange={event => props.handleSocialChange("topcoder", event)}
           />
@@ -282,7 +282,7 @@ const Social = props => {
           <input
             id="hackerearth"
             placeholder="hackerearth user (with @)"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.hackerearth}
             onChange={event => props.handleSocialChange("hackerearth", event)}
           />
@@ -296,7 +296,7 @@ const Social = props => {
           <input
             id="geeksforgeeks"
             placeholder="GFG (<username>/profile)"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.geeks_for_geeks}
             onChange={event =>
               props.handleSocialChange("geeks_for_geeks", event)
@@ -312,7 +312,7 @@ const Social = props => {
           <input
             id="rssurl"
             placeholder="RSS feed URL"
-            className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
             value={props.social.rssurl}
             onChange={event => props.handleSocialChange("rssurl", event)}
           />

src/components/subtitle.js

@@ -8,7 +8,7 @@ const Subtitle = props => {
       </div>
       <input
         id="subtitle"
-        className="w-full text-xs sm:text-lg sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        className="outline-none w-full text-xs sm:text-lg sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
         value={props.data.subtitle}
         onChange={event => props.handleDataChange("subtitle", event)}
       />

src/components/title.js

@@ -9,14 +9,14 @@ const Title = props => {
       <div className="flex justify-start items-center w-full text-regular text-xs sm:text-lg">
         <input
           id="title-prefix"
-          className="w-24 sm:w-40 mr-10 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
+          className="outline-none w-24 sm:w-40 mr-10 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
           value={props.prefix.title}
           onChange={event => props.handlePrefixChange("title", event)}
         />
         <input
           id="title-name"
           placeholder="name"
-          className="placeholder-gray-700 w-1/2 sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 w-1/2 sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.title}
           onChange={event => props.handleDataChange("title", event)}
         />

src/components/work.js

@@ -10,21 +10,21 @@ const Work = props => {
         <input
           id="currentWork-prefix"
           placeholder="Hi, I'm "
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.currentWork}
           onChange={event => props.handlePrefixChange("currentWork", event)}
         />
         <input
           id="currentWork"
           placeholder="project name"
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.currentWork}
           onChange={event => props.handleDataChange("currentWork", event)}
         />
         <input
           id="currentWork-link"
           placeholder="project link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.currentWork}
           onChange={event => props.handleLinkChange("currentWork", event)}
         />
@@ -32,21 +32,21 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="collaborateOn-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.collaborateOn}
           onChange={event => props.handlePrefixChange("collaborateOn", event)}
         />
         <input
           id="collaborateOn"
           placeholder="project name"
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.collaborateOn}
           onChange={event => props.handleDataChange("collaborateOn", event)}
         />
         <input
           id="collaborateOn-link"
           placeholder="project link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.collaborateOn}
           onChange={event => props.handleLinkChange("collaborateOn", event)}
         />
@@ -54,21 +54,21 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="helpWith-prefix"
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.helpWith}
           onChange={event => props.handlePrefixChange("helpWith", event)}
         />
         <input
           id="helpWith"
           placeholder="project name"
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.helpWith}
           onChange={event => props.handleDataChange("helpWith", event)}
         />
         <input
           id="helpWith-link"
           placeholder="project link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.helpWith}
           onChange={event => props.handleLinkChange("helpWith", event)}
         />
@@ -77,14 +77,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="currentLearn-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.currentLearn}
           onChange={event => props.handlePrefixChange("currentLearn", event)}
         />
         <input
           id="currentLearn"
           placeholder="Frameworks, courses etc."
-          className="placeholder-gray-700 w-full sm:w-1/3  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 w-full sm:w-1/3  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.currentLearn}
           onChange={event => props.handleDataChange("currentLearn", event)}
         />
@@ -92,14 +92,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="ama-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.ama}
           onChange={event => props.handlePrefixChange("ama", event)}
         />
         <input
           id="ama"
           placeholder="react, vue and gsap"
-          className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.ama}
           onChange={event => props.handleDataChange("ama", event)}
         />
@@ -108,14 +108,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="contact-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.contact}
           onChange={event => props.handlePrefixChange("contact", event)}
         />
         <input
           id="contact"
           placeholder="example@gmail.com"
-          className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.contact}
           onChange={event => props.handleDataChange("contact", event)}
         />
@@ -124,14 +124,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="portfolio-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.portfolio}
           onChange={event => props.handlePrefixChange("portfolio", event)}
         />
         <input
           id="portfolio"
           placeholder="portfolio link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.portfolio}
           onChange={event => props.handleLinkChange("portfolio", event)}
         />
@@ -139,14 +139,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="blog-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.blog}
           onChange={event => props.handlePrefixChange("blog", event)}
         />
         <input
           id="blog"
           placeholder="blog link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.blog}
           onChange={event => props.handleLinkChange("blog", event)}
         />
@@ -154,14 +154,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="funFact-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.funFact}
           onChange={event => props.handlePrefixChange("funFact", event)}
         />
         <input
           id="funFact"
           placeholder="Chai over Coffee"
-          className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.funFact}
           onChange={event => props.handleDataChange("funFact", event)}
         />

src/pages/index.js

@@ -645,7 +645,7 @@ const IndexPage = () => {
           <div className="w-full flex justify-start items-center my-4">
             <input
               type="text"
-              className="w-1/2 mr-6 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
+              className="outline-none w-1/2 mr-6 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
               placeholder="JSON Backup"
               value={restore}
               onChange={e => setRestore(e.target.value)}