JSFiddle - React, Tailwind, and code Playground

by lalatino

HTML

<div class="invite-box"> <span class="invite-box-text">Invite your friends for big offers!</span>

    <br/>
    <br/>
    <p> <span class="invite-box-text">Your friend e-mail</span> 
        <input class="email-box" type="text" name="" value="" /> <span class="button button-type-three">
         <input type="button" name="" value="Send Invite" />
      </span>

    </p>
    <ul>
        <li> <a href="#">Add from my address book</a>

        </li>
        <li> <a href="#">Remove</a>

        </li>
    </ul>
</div>

CSS

.invite-box {
    margin: 16px 0;
    background-color: #f2ede4;
    width: auto;
    height: auto;
    padding: 1.2em 0 1.2em 1.2em;
}
.invite-box-text {
    font-size: 110%;
    margin-top: .75em;
    font-weight: 700;
    line-height: 1em;
    float: left;
}
.email-box {
    height: 24px;
    border: 1.44px solid #CCBEB3;
    padding: 0 0.72em;
    width: 300px;
    font-family:"Arial";
    color: #2a1f18;
    font-size: 80%;
    background: #ffffff;
    text-align: left;
    margin-left: 0.9em;
    margin-right: .4em;
}