React Forms:

Responsive Add User Form with Email Format Check using React JS

Using this form, you can easily enter the information needed for the website operator to enter the website with this form. This form is responsive and takes people's personal information such as their name and email from the input and enters this information in the table below the form. There is also a button that clicks on the information written in the text fields.

Add User Form Code

Responsive React Form Code

Free HTML Form Code

Add and Remove Form

<!-- This script got from frontendfreecode.com -->
<div id="app"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

html {
  line-height: 1.15; 
  -webkit-text-size-adjust: 100%; 
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box; 
  height: 0; 
  overflow: visible; 
}
pre {
  font-family: monospace, monospace; 
  font-size: 1em; 
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none; 
  text-decoration: underline; 
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; 
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace; 
  font-size: 1em; 
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; 
  font-size: 100%; 
  line-height: 1.15; 
  margin: 0; 
}
button,
input { 
  overflow: visible;
}
button,
select { 
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box; 
  color: inherit; 
  display: table;
  max-width: 100%; 
  padding: 0; 
  white-space: normal; 
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; 
  padding: 0; 
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield; 
  outline-offset: -2px; 
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button; 
  font: inherit; 
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
button {
  background-color: transparent;
  background-image: none;
}
button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}
fieldset {
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
  line-height: 1.5; 
}
*,
::before,
::after {
  box-sizing: border-box; 
  border-width: 0; 
  border-style: solid; 
  border-color: #e2e8f0; 
}
hr {
  border-top-width: 1px;
}
img {
  border-style: solid;
}
textarea {
  resize: vertical;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color: #a0aec0;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #a0aec0;
}
input::-ms-input-placeholder, textarea::-ms-input-placeholder {
  color: #a0aec0;
}
input::placeholder,
textarea::placeholder {
  color: #a0aec0;
}
button,
[role="button"] {
  cursor: pointer;
}
table {
  border-collapse: collapse;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/**
 * Reset links to optimize for opt-in styling instead of
 * opt-out.
 */
a {
  color: inherit;
  text-decoration: inherit;
}
button,
input,
optgroup,
select,
textarea {
  padding: 0;
  line-height: inherit;
  color: inherit;
}
pre,
code,
kbd,
samp {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}
img,
video {
  max-width: 100%;
  height: auto;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
.form-group {
  margin-top: 1.25rem;
}
.form-group:first-child {
  margin-top: 0;
}
.form-group label {
  display: block;
  --text-opacity: 1;
  color: #718096;
  color: rgba(113, 128, 150, var(--text-opacity));
}
.input {
  margin-top: 0.25rem;
  --bg-opacity: 1;
  background-color: #f7fafc;
  background-color: rgba(247, 250, 252, var(--bg-opacity));
  border-width: 1px;
  --border-opacity: 1;
  border-color: #e2e8f0;
  border-color: rgba(226, 232, 240, var(--border-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.25rem;
  outline: 0;
  --text-opacity: 1;
  color: #2d3748;
  color: rgba(45, 55, 72, var(--text-opacity));
}
.input:focus {
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}
.bg-white {
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
}
.bg-gray-100 {
  --bg-opacity: 1;
  background-color: #f7fafc;
  background-color: rgba(247, 250, 252, var(--bg-opacity));
}
.bg-gray-200 {
  --bg-opacity: 1;
  background-color: #edf2f7;
  background-color: rgba(237, 242, 247, var(--bg-opacity));
}
.bg-blue-500 {
  --bg-opacity: 1;
  background-color: #4299e1;
  background-color: rgba(66, 153, 225, var(--bg-opacity));
}
.hover\:bg-gray-300:hover {
  --bg-opacity: 1;
  background-color: #e2e8f0;
  background-color: rgba(226, 232, 240, var(--bg-opacity));
}
.hover\:bg-blue-600:hover {
  --bg-opacity: 1;
  background-color: #3182ce;
  background-color: rgba(49, 130, 206, var(--bg-opacity));
}
.rounded {
  border-radius: 0.25rem;
}
.border-t {
  border-top-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.flex-col {
  flex-direction: column;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-end {
  justify-content: flex-end;
}
.font-medium {
  font-weight: 500;
}
.h-5 {
  height: 1.25rem;
}
.h-8 {
  height: 2rem;
}
.text-sm {
  font-size: 0.875rem;
}
.text-lg {
  font-size: 1.125rem;
}
.text-xl {
  font-size: 1.25rem;
}
.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.ml-1 {
  margin-left: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.max-w-xl {
  max-width: 36rem;
}
.p-5 {
  padding: 1.25rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.text-left {
  text-align: left;
}
.text-white {
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
}
.text-gray-500 {
  --text-opacity: 1;
  color: #a0aec0;
  color: rgba(160, 174, 192, var(--text-opacity));
}
.text-gray-600 {
  --text-opacity: 1;
  color: #718096;
  color: rgba(113, 128, 150, var(--text-opacity));
}
.text-gray-700 {
  --text-opacity: 1;
  color: #4a5568;
  color: rgba(74, 85, 104, var(--text-opacity));
}
.text-red-600 {
  --text-opacity: 1;
  color: #e53e3e;
  color: rgba(229, 62, 62, var(--text-opacity));
}
.uppercase {
  text-transform: uppercase;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.w-5 {
  width: 1.25rem;
}
.w-full {
  width: 100%;
}
@-webkit-keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@-webkit-keyframes pulse {
  50% {
    opacity: .5;
  }
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
@-webkit-keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
            animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
            animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
            animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
            animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
@media (min-width: 640px) {
  .sm\:container {
    width: 100%;
  }
  @media (min-width: 640px) {
    .sm\:container {
      max-width: 640px;
    }
  }
  @media (min-width: 768px) {
    .sm\:container {
      max-width: 768px;
    }
  }
  @media (min-width: 1024px) {
    .sm\:container {
      max-width: 1024px;
    }
  }
  @media (min-width: 1280px) {
    .sm\:container {
      max-width: 1280px;
    }
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:items-center {
    align-items: center;
  }
  .sm\:justify-between {
    justify-content: space-between;
  }
  .sm\:mt-0 {
    margin-top: 0;
  }
  .sm\:px-0 {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 768px) {
  .md\:container {
    width: 100%;
  }
  @media (min-width: 640px) {
    .md\:container {
      max-width: 640px;
    }
  }
  @media (min-width: 768px) {
    .md\:container {
      max-width: 768px;
    }
  }
  @media (min-width: 1024px) {
    .md\:container {
      max-width: 1024px;
    }
  }
  @media (min-width: 1280px) {
    .md\:container {
      max-width: 1280px;
    }
  }
}
@media (min-width: 1024px) {
  .lg\:container {
    width: 100%;
  }
  @media (min-width: 640px) {
    .lg\:container {
      max-width: 640px;
    }
  }
  @media (min-width: 768px) {
    .lg\:container {
      max-width: 768px;
    }
  }
  @media (min-width: 1024px) {
    .lg\:container {
      max-width: 1024px;
    }
  }
  @media (min-width: 1280px) {
    .lg\:container {
      max-width: 1280px;
    }
  }
}
@media (min-width: 1280px) {
  .xl\:container {
    width: 100%;
  }
  @media (min-width: 640px) {
    .xl\:container {
      max-width: 640px;
    }
  }
  @media (min-width: 768px) {
    .xl\:container {
      max-width: 768px;
    }
  }
  @media (min-width: 1024px) {
    .xl\:container {
      max-width: 1024px;
    }
  }
  @media (min-width: 1280px) {
    .xl\:container {
      max-width: 1280px;
    }
  }
}

const { useState } = React;
const { useForm } = ReactHookForm;
function App() {
    const [users, setUsers] = useState([]);
    const { reset, handleSubmit, register, errors } = useForm();
    function addUser(newUser) {
        setUsers(users.concat({ ...newUser, id: users.length + 1 }));
        reset();
    }
    return /*#__PURE__*/(
        React.createElement("div", { className: "container px-5 sm:px-0 my-10 mx-auto max-w-xl" }, /*#__PURE__*/
            React.createElement("header", { className: "flex flex-col items-start sm:flex-row sm:items-center sm:justify-between" }, /*#__PURE__*/
                React.createElement("a", { href: "http://frontendfreecode.com" }, /*#__PURE__*/
                    React.createElement("svg", { className: "h-8" }, /*#__PURE__*/
                        React.createElement("use", { xlinkHref: "#logo" }))), /*#__PURE__*/
                React.createElement("h1", { className: "mt-2 sm:mt-0 text-gray-600 text-lg uppercase font-medium tracking-wide" }, "React Forms in 2020")), /*#__PURE__*/
            React.createElement("form", {
                onSubmit: handleSubmit(addUser),
                className: "bg-white rounded p-5 shadow mt-4"
            }, /*#__PURE__*/
                React.createElement("div", { className: "form-group" }, /*#__PURE__*/
                    React.createElement("label", { htmlFor: "name" }, "Name"), /*#__PURE__*/
                    React.createElement("input", {
                        ref: register({ required: "Name can't be blank" }),
                        className: "input",
                        name: "name",
                        id: "name",
                        type: "text",
                        placeholder: "Name and Family",
                        autoComplete: "off"
                    }), /*#__PURE__*/
                    React.createElement(ErrorMessage, { error: errors.name })), /*#__PURE__*/
                React.createElement("div", { className: "form-group" }, /*#__PURE__*/
                    React.createElement("label", { htmlFor: "email" }, "Email"), /*#__PURE__*/
                    React.createElement("input", {
                        ref: register({ required: "Email can't be blank" }),
                        className: "input",
                        name: "email",
                        id: "email",
                        type: "email",
                        autoComplete: "off",
                        placeholder: "test@example.com"
                    }), /*#__PURE__*/
                    React.createElement(ErrorMessage, { error: errors.email })), /*#__PURE__*/
                React.createElement("div", { className: "flex justify-end border-t mt-3 pt-5" }, /*#__PURE__*/
                    React.createElement("button", {
                        type: "button",
                        onClick: reset,
                        className: "bg-gray-200 text-gray-700 py-2 px-4 rounded hover:bg-gray-300"
                    }, "Reset"), /*#__PURE__*/
                    React.createElement("button", {
                        className: "ml-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
                    }, "Add User"))), /*#__PURE__*/
            React.createElement("div", {
                className: "bg-white rounded p-5 shadow mt-4"
            }, /*#__PURE__*/
                React.createElement("h2", { className: "text-xl" }, "Users (", users.length, ")"), /*#__PURE__*/
                React.createElement("table", { className: "w-full mt-2" }, /*#__PURE__*/
                    React.createElement("thead", null, /*#__PURE__*/
                        React.createElement("tr", { className: "border-b" }, /*#__PURE__*/
                            React.createElement("th", { className: "text-left py-2" }, "ID"), /*#__PURE__*/
                            React.createElement("th", { className: "text-left py-2" }, "Name"), /*#__PURE__*/
                            React.createElement("th", { className: "text-left py-2" }, "Email"))), /*#__PURE__*/
                    React.createElement("tbody", null,
                        users.map((user) => /*#__PURE__*/
                            React.createElement("tr", { key: user.id, className: "border-t" }, /*#__PURE__*/
                                React.createElement("td", { className: "py-2" }, user.id), /*#__PURE__*/
                                React.createElement("td", { className: "py-2" }, user.name), /*#__PURE__*/
                                React.createElement("td", { className: "py-2" }, user.email))))))));
}
const ErrorMessage = ({ error }) => {
    if (!error) return null;
    return /*#__PURE__*/(
        React.createElement("div", { className: "flex items-center mt-2 text-gray-500 text-sm" }, /*#__PURE__*/
            React.createElement("span", null, /*#__PURE__*/
                React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", className: "text-red-600 w-5 h-5" }, /*#__PURE__*/React.createElement("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }))), /*#__PURE__*/
            React.createElement("span", { className: "ml-1" },
                error.message)));
};
ReactDOM.render( /*#__PURE__*/
    React.createElement(App, null),
    document.querySelector('#app'));

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/react-hook-form@6.7.0/dist/index.umd.production.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/react-hook-form@6.7.0/dist/index.umd.production.min.js'></script>
<style>
html {
  line-height: 1.15; 
  -webkit-text-size-adjust: 100%; 
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box; 
  height: 0; 
  overflow: visible; 
}
pre {
  font-family: monospace, monospace; 
  font-size: 1em; 
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none; 
  text-decoration: underline; 
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; 
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace; 
  font-size: 1em; 
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; 
  font-size: 100%; 
  line-height: 1.15; 
  margin: 0; 
}
button,
input { 
  overflow: visible;
}
button,
select { 
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box; 
  color: inherit; 
  display: table;
  max-width: 100%; 
  padding: 0; 
  white-space: normal; 
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; 
  padding: 0; 
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield; 
  outline-offset: -2px; 
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button; 
  font: inherit; 
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
button {
  background-color: transparent;
  background-image: none;
}
button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}
fieldset {
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
  line-height: 1.5; 
}
*,
::before,
::after {
  box-sizing: border-box; 
  border-width: 0; 
  border-style: solid; 
  border-color: #e2e8f0; 
}
hr {
  border-top-width: 1px;
}
img {
  border-style: solid;
}
textarea {
  resize: vertical;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color: #a0aec0;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #a0aec0;
}
input::-ms-input-placeholder, textarea::-ms-input-placeholder {
  color: #a0aec0;
}
input::placeholder,
textarea::placeholder {
  color: #a0aec0;
}
button,
[role="button"] {
  cursor: pointer;
}
table {
  border-collapse: collapse;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/**
 * Reset links to optimize for opt-in styling instead of
 * opt-out.
 */
a {
  color: inherit;
  text-decoration: inherit;
}
button,
input,
optgroup,
select,
textarea {
  padding: 0;
  line-height: inherit;
  color: inherit;
}
pre,
code,
kbd,
samp {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}
img,
video {
  max-width: 100%;
  height: auto;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
.form-group {
  margin-top: 1.25rem;
}
.form-group:first-child {
  margin-top: 0;
}
.form-group label {
  display: block;
  --text-opacity: 1;
  color: #718096;
  color: rgba(113, 128, 150, var(--text-opacity));
}
.input {
  margin-top: 0.25rem;
  --bg-opacity: 1;
  background-color: #f7fafc;
  background-color: rgba(247, 250, 252, var(--bg-opacity));
  border-width: 1px;
  --border-opacity: 1;
  border-color: #e2e8f0;
  border-color: rgba(226, 232, 240, var(--border-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.25rem;
  outline: 0;
  --text-opacity: 1;
  color: #2d3748;
  color: rgba(45, 55, 72, var(--text-opacity));
}
.input:focus {
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}
.bg-white {
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
}
.bg-gray-100 {
  --bg-opacity: 1;
  background-color: #f7fafc;
  background-color: rgba(247, 250, 252, var(--bg-opacity));
}
.bg-gray-200 {
  --bg-opacity: 1;
  background-color: #edf2f7;
  background-color: rgba(237, 242, 247, var(--bg-opacity));
}
.bg-blue-500 {
  --bg-opacity: 1;
  background-color: #4299e1;
  background-color: rgba(66, 153, 225, var(--bg-opacity));
}
.hover\:bg-gray-300:hover {
  --bg-opacity: 1;
  background-color: #e2e8f0;
  background-color: rgba(226, 232, 240, var(--bg-opacity));
}
.hover\:bg-blue-600:hover {
  --bg-opacity: 1;
  background-color: #3182ce;
  background-color: rgba(49, 130, 206, var(--bg-opacity));
}
.rounded {
  border-radius: 0.25rem;
}
.border-t {
  border-top-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.flex-col {
  flex-direction: column;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-end {
  justify-content: flex-end;
}
.font-medium {
  font-weight: 500;
}
.h-5 {
  height: 1.25rem;
}
.h-8 {
  height: 2rem;
}
.text-sm {
  font-size: 0.875rem;
}
.text-lg {
  font-size: 1.125rem;
}
.text-xl {
  font-size: 1.25rem;
}
.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.ml-1 {
  margin-left: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.max-w-xl {
  max-width: 36rem;
}
.p-5 {
  padding: 1.25rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.text-left {
  text-align: left;
}
.text-white {
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
}
.text-gray-500 {
  --text-opacity: 1;
  color: #a0aec0;
  color: rgba(160, 174, 192, var(--text-opacity));
}
.text-gray-600 {
  --text-opacity: 1;
  color: #718096;
  color: rgba(113, 128, 150, var(--text-opacity));
}
.text-gray-700 {
  --text-opacity: 1;
  color: #4a5568;
  color: rgba(74, 85, 104, var(--text-opacity));
}
.text-red-600 {
  --text-opacity: 1;
  color: #e53e3e;
  color: rgba(229, 62, 62, var(--text-opacity));
}
.uppercase {
  text-transform: uppercase;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.w-5 {
  width: 1.25rem;
}
.w-full {
  width: 100%;
}
@-webkit-keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@-webkit-keyframes pulse {
  50% {
    opacity: .5;
  }
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
@-webkit-keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
            animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
            animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
            animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
            animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
@media (min-width: 640px) {
  .sm\:container {
    width: 100%;
  }
  @media (min-width: 640px) {
    .sm\:container {
      max-width: 640px;
    }
  }
  @media (min-width: 768px) {
    .sm\:container {
      max-width: 768px;
    }
  }
  @media (min-width: 1024px) {
    .sm\:container {
      max-width: 1024px;
    }
  }
  @media (min-width: 1280px) {
    .sm\:container {
      max-width: 1280px;
    }
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:items-center {
    align-items: center;
  }
  .sm\:justify-between {
    justify-content: space-between;
  }
  .sm\:mt-0 {
    margin-top: 0;
  }
  .sm\:px-0 {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 768px) {
  .md\:container {
    width: 100%;
  }
  @media (min-width: 640px) {
    .md\:container {
      max-width: 640px;
    }
  }
  @media (min-width: 768px) {
    .md\:container {
      max-width: 768px;
    }
  }
  @media (min-width: 1024px) {
    .md\:container {
      max-width: 1024px;
    }
  }
  @media (min-width: 1280px) {
    .md\:container {
      max-width: 1280px;
    }
  }
}
@media (min-width: 1024px) {
  .lg\:container {
    width: 100%;
  }
  @media (min-width: 640px) {
    .lg\:container {
      max-width: 640px;
    }
  }
  @media (min-width: 768px) {
    .lg\:container {
      max-width: 768px;
    }
  }
  @media (min-width: 1024px) {
    .lg\:container {
      max-width: 1024px;
    }
  }
  @media (min-width: 1280px) {
    .lg\:container {
      max-width: 1280px;
    }
  }
}
@media (min-width: 1280px) {
  .xl\:container {
    width: 100%;
  }
  @media (min-width: 640px) {
    .xl\:container {
      max-width: 640px;
    }
  }
  @media (min-width: 768px) {
    .xl\:container {
      max-width: 768px;
    }
  }
  @media (min-width: 1024px) {
    .xl\:container {
      max-width: 1024px;
    }
  }
  @media (min-width: 1280px) {
    .xl\:container {
      max-width: 1280px;
    }
  }
}
</style>

</head>
<body>
<div id="app"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
const { useState } = React;
const { useForm } = ReactHookForm;
function App() {
    const [users, setUsers] = useState([]);
    const { reset, handleSubmit, register, errors } = useForm();
    function addUser(newUser) {
        setUsers(users.concat({ ...newUser, id: users.length + 1 }));
        reset();
    }
    return /*#__PURE__*/(
        React.createElement("div", { className: "container px-5 sm:px-0 my-10 mx-auto max-w-xl" }, /*#__PURE__*/
            React.createElement("header", { className: "flex flex-col items-start sm:flex-row sm:items-center sm:justify-between" }, /*#__PURE__*/
                React.createElement("a", { href: "http://frontendfreecode.com" }, /*#__PURE__*/
                    React.createElement("svg", { className: "h-8" }, /*#__PURE__*/
                        React.createElement("use", { xlinkHref: "#logo" }))), /*#__PURE__*/
                React.createElement("h1", { className: "mt-2 sm:mt-0 text-gray-600 text-lg uppercase font-medium tracking-wide" }, "React Forms in 2020")), /*#__PURE__*/
            React.createElement("form", {
                onSubmit: handleSubmit(addUser),
                className: "bg-white rounded p-5 shadow mt-4"
            }, /*#__PURE__*/
                React.createElement("div", { className: "form-group" }, /*#__PURE__*/
                    React.createElement("label", { htmlFor: "name" }, "Name"), /*#__PURE__*/
                    React.createElement("input", {
                        ref: register({ required: "Name can't be blank" }),
                        className: "input",
                        name: "name",
                        id: "name",
                        type: "text",
                        placeholder: "Name and Family",
                        autoComplete: "off"
                    }), /*#__PURE__*/
                    React.createElement(ErrorMessage, { error: errors.name })), /*#__PURE__*/
                React.createElement("div", { className: "form-group" }, /*#__PURE__*/
                    React.createElement("label", { htmlFor: "email" }, "Email"), /*#__PURE__*/
                    React.createElement("input", {
                        ref: register({ required: "Email can't be blank" }),
                        className: "input",
                        name: "email",
                        id: "email",
                        type: "email",
                        autoComplete: "off",
                        placeholder: "test@example.com"
                    }), /*#__PURE__*/
                    React.createElement(ErrorMessage, { error: errors.email })), /*#__PURE__*/
                React.createElement("div", { className: "flex justify-end border-t mt-3 pt-5" }, /*#__PURE__*/
                    React.createElement("button", {
                        type: "button",
                        onClick: reset,
                        className: "bg-gray-200 text-gray-700 py-2 px-4 rounded hover:bg-gray-300"
                    }, "Reset"), /*#__PURE__*/
                    React.createElement("button", {
                        className: "ml-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
                    }, "Add User"))), /*#__PURE__*/
            React.createElement("div", {
                className: "bg-white rounded p-5 shadow mt-4"
            }, /*#__PURE__*/
                React.createElement("h2", { className: "text-xl" }, "Users (", users.length, ")"), /*#__PURE__*/
                React.createElement("table", { className: "w-full mt-2" }, /*#__PURE__*/
                    React.createElement("thead", null, /*#__PURE__*/
                        React.createElement("tr", { className: "border-b" }, /*#__PURE__*/
                            React.createElement("th", { className: "text-left py-2" }, "ID"), /*#__PURE__*/
                            React.createElement("th", { className: "text-left py-2" }, "Name"), /*#__PURE__*/
                            React.createElement("th", { className: "text-left py-2" }, "Email"))), /*#__PURE__*/
                    React.createElement("tbody", null,
                        users.map((user) => /*#__PURE__*/
                            React.createElement("tr", { key: user.id, className: "border-t" }, /*#__PURE__*/
                                React.createElement("td", { className: "py-2" }, user.id), /*#__PURE__*/
                                React.createElement("td", { className: "py-2" }, user.name), /*#__PURE__*/
                                React.createElement("td", { className: "py-2" }, user.email))))))));
}
const ErrorMessage = ({ error }) => {
    if (!error) return null;
    return /*#__PURE__*/(
        React.createElement("div", { className: "flex items-center mt-2 text-gray-500 text-sm" }, /*#__PURE__*/
            React.createElement("span", null, /*#__PURE__*/
                React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", className: "text-red-600 w-5 h-5" }, /*#__PURE__*/React.createElement("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }))), /*#__PURE__*/
            React.createElement("span", { className: "ml-1" },
                error.message)));
};
ReactDOM.render( /*#__PURE__*/
    React.createElement(App, null),
    document.querySelector('#app'));
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS