JSFiddle - React, Tailwind, and code Playground

by Alexandr Loginov

HTML

<form action="" method="post" onsubmit="if(this.name.value==''){alert('Введите Ваше имя!');return 
false}if(this.phone.value==''){alert('Введите Ваш номер телефона!');return false}urlGen(this);return true;" class="c-form-popup"> 
<input type="hidden" name="product_id" value="1639"/> 
<input type="hidden" name="ref" value="18357"/> 
<input placeholder="ФИО" maxlength="25" name="name" type="text" class="c-form-popup__item"> 
<input placeholder="Телефон" maxlength="25" name="phone" type="text" class="c-form-popup__item"> 
<button type="submit" class="c-form-popup__item c-form-popup__item_button">Заказать!</button> 
</form> 


        <form action="" method="post" onsubmit="if (this.name.value=='' || this.phone.value=='') {alert('Заполните форму!');return false;} else {rlGen(this);return true;}"> 
<input type="hidden" name="product_id" value="1639"/> 
<input type="hidden" name="ref" value="18357"/> 
<input placeholder="ФИО" maxlength="25" name="name" type="text"> 
<input placeholder="Телефон" maxlength="25" name="phone" type="text"> 
<button type="submit">Заказать!</button> 
</form> 





         <form action="" method="post" onsubmit="if(this.name.value==''){alert('Введите Ваше имя!');return 
false}if(this.phone.value==''){alert('Введите Ваш номер телефона!');return false}urlGen(this);return true;"> 
<input type="hidden" name="product_id" value="1639"/> 
<input type="hidden" name="ref" value="18357"/> 
          <div class="fld-grp clearfix grpelem" id="widgetu11187" data-required="true"><!-- none box -->
           <label class="fld-label actAsDiv clearfix grpelem" id="u11190-4" for="widgetu11187_input"><!-- content --><span class="actAsPara">ФИО</span></label>
           <span class="fld-input NoWrap actAsDiv transition rgba-background clearfix grpelem" id="u11188-4"><!-- content --><input class="wrapped-input" type="text" spellcheck="false" id="widgetu11187_input" name="name" tabindex="1"/><label class="wrapped-input fld-prompt" id="widgetu11187_prompt"...

CSS

.c-form-popup {
  display: block;
  width: 90%;
  margin: auto;
  margin-top: 30px;
}
.c-form-popup__item {
  display: block;
  width: 100%;
  height: 40px;
  background: #FFF;
  color: #333;
  padding-left: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #999;
  margin-bottom: 10px;
}
.c-form-popup__item_button {
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #F7921E;
  color: #FFF;
}