JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<form action="sendMail.php">
    <ul>
        <li>
            <strong>To <small>separate multiple users by semi colon;</small></strong>
            <input type="text" name="to" id="to" />
        </li>
        <li>
            <strong>Subject</strong>
            <input type="text" name="subject" id="subject" />
        </li>
        <li>
            <strong>Message</strong>
            <textarea name="message" id="message" cols="30" rows="10"></textarea>
        </li>
        <li class="submit"><input type="submit" value="Send" /> <input type="reset" value="Reset" /></li>
    </ul>
</form>

CSS

* {font-family: Segoe UI;}
form {display: block; margin: 10px;}
form ul, form ul li {margin: 0; padding: 0; list-style: none;}
form ul, form ul li strong {display: block;}
form ul li {padding: 5px 0;}
form ul li input,
form ul li textarea {resize: none; width: 95%; padding: 2px; border-radius: 3px; border: 1px solid #ccf;}
form ul li.submit {text-align: center;}
form ul li.submit input {width: auto; display: inline-block; padding: 5px 15px; cursor: pointer;}
form ul li.submit input:first-child {border: 1px solid #00f; background-color: #33f; color: #fff; font-weight: bold;}
form ul li.submit input:hover {border: 1px solid #00f;}
form ul li.submit input:first-child:hover {background-color: #09f; color: #000;}