JSFiddle - React, Tailwind, and code Playground

by mich

HTML

<div class="popup-outer">
    <div class="popup-title">Sign up</div>
    <div class="popup-body-wrapper">
        <div class="popup-body">
            <ul id="connectmethods">
                <li id="connect-fb">
                    <a href="#"><img src="http://a1.sndcdn.com/images/connect_facebook.png?b9e0db8" alt="fbconnect" /></a>
                </li>
                <li id="connect-openid">
                    <img src="http://www.allfacebook.com/images/openid-logo.gif" alt="openid" />
                </li>
                <li id="connect-email">
                    <form action="." method="post" onsubmit="return false;">
                        <fieldset>
                            <label for="signup_email">Email:</label>
                            <input type="text" id="signup_email" name="signup_email" />
                        </fieldset>
                    </form>
                </li>   
            </ul>
            
            
        </div>
    </div>
</div>

CSS

body {
    font: 13px Helmet, Freesans, sans-serif;
}
.popup-outer {
    border: solid 1px #888;
    border-radius: 5px;
    display: block;
    width: 400px;    
}
.popup-title {
    background-color: #444;
    color: #FFF;
    font-size: 115%;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
    margin: 4px;
    
}
.popup-body-wrapper {
    margin: 4px 0;
}
.popup-body {
    padding: 2px 8px;
}
.popup-body-wrapper iframe {
    border: none;
    width: 100%;
    height: 400px;
}
ul#connectmethods {
    margin-bottom: 5px;
}
ul#connectmethods li {
    padding: 5px 0;
    border-bottom: solid 1px #CCC;
}
ul#connectmethods li#connect-openid img {
    width: 130px;
}