JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="call_back">
<form id="cbf" method="post" action="mail.php" onsubmit="return val_cbf();">

<div class="form_flex">
<div class="form_item">
<label for="name">Name</label>
<input type="text" id="name" name="name"></div>
<div class="form_item">
<label for="email">Email</label>
<input type="text" id="email" name="email"></div>
<div class="form_item">
<label for="phone">Telephone</label>
<input type="tel" id="phone" name="phone"></div>
<div class="form_item">
<label for="best">Best time to call</label>
<input type="text" id="best" name="best"></div>
</div>

<label for="message">Message</label>
<textarea id="message" name="message" rows="6" placeholder="Type your message here..."></textarea>


<input type="submit" value="Send Message" id="access" class="send" disabled>
</form>

<div class="rob_text"><div class="rob" id="rob" onclick="rob();"><span></span></div>Please confirm that you are happy for us to contact you</div>

</div>

<a href="../customer-privacy-notice/">Customer Privacy Notice</a>

CSS

.form_flex {display: -webkit-flex;display: flex;-webkit-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-content: stretch;align-content: stretch;-webkit-align-items: flex-start;align-items: flex-start;box-sizing: border-box;column-gap: 10px}
    
.form_item {width:calc(50% - 5px);box-sizing: border-box;}
    
@media screen and (max-width: 760px) { 
.form_flex {-webkit-flex-direction: column;flex-direction: column;}
.form_item {width:100%;}
}   

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus {-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;}
  
.call_back {font-family:Arial;font-size:16px;position:relative;;padding-bottom:70px;}
.call_back h2 {color:#405C9E;font-size:20px;}
.call_back label {display:block;margin-top:10px;}
.call_back input[type=text], .call_back input[type=tel], .call_back textarea {width: 100%;padding: 12px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;margin-top: 2px;resize: vertical;outline: none;font-family:Arial;}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,  textarea:focus, select:focus {border-color:#59B200;box-shadow: none;}

.send {font-size:18px;position:absolute;bottom:0;left:0;background-color: #cccccc;color: white;padding: 12px 20px;border: none;margin:0;border-radius: 4px;cursor: pointer;transition:all 1s ease;}

.ready {background-color: #008000;transition:all 1s ease;}

.rob {float:left;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;margin-right: 12px; width:42px;height:42px;cursor:pointer;}

.rob span {display:block;width:100%;height:100%;background-image:none;background-repeat: no-repeat;background-position: center...