JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Margin Left Not Working</title>
<style type="text/css">
#sform {
    display:inline-block;
    border: solid 1px #d2d2d2;
    padding: 10px 10px;    
    border-radius: 2em;
    box-shadow: 0 1px 0px rgba(0,0,0,.1);
    background: #f1f1f1;    
    
    
}

.sfield {
    padding: 6px 35px 6px 8px;        
    border: solid 1px #bcbbbb;    
    width: 202px;
    border-radius: 2em;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

.sbutton {
    color: #fff;
    background: #5f5f5f;
    margin-left: -31px;
    border: solid 1px #494949;
    height: 27px;
    width: 27px;
    border-radius: 2em;
}
</style>
</head>
<body>
<form id="sform" action="index.htm">
<input class="sfield" type="text" value="Search..." />
<input class="sbutton" type="button" value="Go" />
</form>
</body>
</html>