JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tip_box">
    <h3>Send</h3>
    <hr />
    <form id="email_form">
        <ul>
            <li>
                <label for="name_text_box">Your Name</label>
                <input type="text" name="name_text_box" class="form_input" id="name_text_box" />
            </li>
            <li>
                <label for="Text1">Recipient Name</label>
                <input type="text" name="name_text_box" class="form_input" id="Text1" />
            </li>
            <li class="contact_form_input">
                <label for="email_text_box">Your Email</label>
                <input type="text" name="email_text_box" class="form_input" id="email_text_box" />
            </li>
            <li>
                <label for="Text2">Recipient Email</label>
                <input type="text" name="email_text_box" class="form_input" id="Text2" />
            </li>
        </ul>
    </form>
</div>

<p>This is where your message will go. Anything you want, as long as you want. Make it personal; make the recipient know you care.</p>

CSS

.tip_box ul li {
    float: left;
    margin-right: 40px;
}

.tip_box ul li label {
    display: block;
}

.tip_box {
    padding: 20px;
    margin: 20px 0px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 10px;
    border-radius: 7px;
    padding-left: 55px;
    background: #eee;
    font-style:italic;
    background: #eff7d9 url(../images/icons/tip.png) no-repeat scroll 10px 15px;
    border: 1px solid #b7db58;
    color: #5d791b;
    
    
    width: 400px;
}