JSFiddle - React, Tailwind, and code Playground

by rasikaceg

HTML

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
     <link rel="stylesheet" type="text/css" href="module_css.css">
</head>
<body>
       <form action="http://127.0.0.1:1213/ModuleOwner" method="post">
     <h1><b>Module Owner Information</b></h1>
     

        <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
        <section>
            <table>
                <tbody><tr>
                    <td>
                        <label for="module"> <span>Module: </span>
                        </label>
                    </td>
                    <td>
                        <input type="text" id="module" name="modulename" required=""> <strong><abbr title="required">*</abbr></strong>

                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="name"> <span>Name: </span>
                        </label>
                    </td>
                    <td>
                        <input type="text" id="name" name="Ownername" required=""> <strong><abbr title="required">*</abbr></strong>

                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="mail"> <span>E-mail: </span> 
                        </label>
                    </td>
                    <td>
                        <input type="email" id="mail" name="Ownermail" x-moz-errormessage="This is not a valid e-mail" required=""> <strong><abbr title="required">*</abbr></strong>

                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="team"> <span>Team: </span> 
                        </label>
                    </td>
                    <td>
                        <input type="text" id="team" name="teamname" required=""> <strong><abbr title="required">*</abbr></strong>

                    </td>
               ...

CSS

<style> h1 {
    margin-top: 0;
    font-weight: bold;
    display: block;
    color: #0B0B61;
    font-family:'Oswald';
    font-size: 20px;
}
p{
    font-family:'Oswald';
    color: #685F5F;
}
ul {
    margin : 0;
    padding: 0;
    list-style: none;
}
form {
    background-color:#F5F5F5;
    margin: 0 auto;
    width : 400px;
    padding: 1em;
    border : 3px solid #0B0B61;
    border-radius: 1em;
}
label {
    font-weight: bold;
    display: block;
    width: 100px;
    float: left;
    text-align:left;
    padding:1em;
    color: #0B0B61;
    font-family:'Oswald';
    font-size: 15px;
    text-decoration: none;
}
input {
    margin-right: auto;
    display:inline-block;
    width:200px;
    text-align:left;
}
fieldset {
    border:none;
    width:700px;
    margin:0px auto;
}
button {
    margin-left: 180px;
    background-color: #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:6px;
    color: #0B0B61;
    font-family:'Oswald';
    font-size: 20px;
    text-decoration: none;
    cursor: hand;
    border:none;
}
button:hover {
    border: none;
    background:#A57D7D;
    box-shadow: 0px 0px 1px #755D5D;
}
</style>