JSFiddle - React, Tailwind, and code Playground

by Burak Şahin

HTML

<p class="iletisim">Adınız*<br />
    [text* isim class:yazi] </p>

<p class="iletisim">Epostanız*<br />
  [email* eposta class:yazi]</p>

<p class="iletisim">Konu*<br />
    [text* konu class:yazi] </p>

<p class="iletisim">[quiz soru class:yazi "2+3=?|5"]</p>

<p>İletiniz*<br />
 [textarea* ileti] </p>

<p class="iletisim">[submit id:gonder "Gönder"]</p>

CSS

input.wpcf7-form-control {
    height:25px;
    line-height:25px;
    width: 260px;
    padding: 10px;
    border: 1px solid #E5E5E5;
    background: #FBFBFB;
    outline: none;
    /* add submit button a rounded corner */
    -o-border-radius: 5px;
    /*for opera*/
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    /* add input box a inset shadow  */
    -moz-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    /*for Mozilla*/
    -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    /*for Chrome and Safari*/
    box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
}
input.wpcf7-form-control:focus {
    border:solid 1px #73ac57;
}
textarea.wpcf7-form-control:focus {
    border:solid 1px #ccc;
}
textarea.wpcf7-form-control {
    height:100px;
    width: 520px;
    padding: 10px 3px 3px 15px;
    margin: 2px 13px 16px 0;
    border: 1px solid #E5E5E5;
    background: #FBFBFB;
    outline: none;
    /* add submit button a rounded corner */
    -o-border-radius: 5px;
    /*for opera*/
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    /* add input box a inset shadow  */
    -moz-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    /*for Mozilla*/
    -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    /*for Chrome and Safari*/
    box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
}
p.iletisim {
    width:271px;
    float:left
}
input#gonder {
    width:100px;
    line-height:25px;
    font-weight: bold;
    color: #777;
    margin-right:30px;
    background-color: #ececec;
    text-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0;
    padding: 3px 10px;
    cursor: pointer;
    /* add submit button a rounded corner */
    -o-border-radius: 5px;
    /*for opera*/
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    /* add background gradient effet */
    /*for Chrome and Safari*/
    background:...