JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div id="container">

    <div id="left" class="twoCol">

    <div id="logo"><img src="/img/logo.png" height= "150px" width="257px" alt="">

    <div id="whatis">
      <p>What is Epic Swap?</p></div>

    <div id="about">
      <p>Epic Swap is the opportunity to share<br> an  experience, make a friend and do<br> it all over again.</p></div>

    <div id="equal">
      <img src="/img/equal.png" height="56" width="100" alt=""></div>

    </div>
    </div>


    <div id="right" class="twoCol">
        <form id="form1">
       <div id="formleft"><label class="label">Username:</label>
          <input type="text" /></div>
       <div id="formright"><label class="label">Password:</label>
          <input type="text" /></div>
        <div id="signup">
          <p>Sign Up Now!!</p></div>

        <form id="form2">
           <p><label class="label2" for="name">Name</label2> 
           <input id="input2" type="text" id="name" /></p>

           <p><label class="label2" for="e-mail">E-mail</label2>
           <input id="input2" type="text" id="e-mail" /></p>
           <p class="submit"><input type="submit" value="Submit" /></p>
       </form>

CSS

* {
 margin:0px;
 padding:0px;
}

body {
 background-image: url(/img/bamboo.png);
 background-repeat:repeat-x;
 background-color:black;
 text-align:center;
}

#container {
 margin:0 auto;
 margin-top:0px;
 width:920px;
 height:920px;
 text-align:left;
 background-color:00000;
}

.twoCol {
 height:55em;
 margin:2%;
 width:46%;
 background-color:0000;
 float:left;
}

#logo {
 margin:0px;
 float:left;
}

#whatis {
 font-family: rockwell;
 text-align:left;
 font-size:1.4em;
 padding-top:2em;
 color:#cccccc;
}

#about {
 font-family: rockwell;
 letter-spacing:.1em;
 line-height:1.3em;
 text-align:left;
 font-size:1.1em;
 padding-top:.2em;
 color:#ffff99;
}

#equal {
 padding-top:1em;
 padding-left: 9em;
}

#signup {
 font-family:rockwell;
 float:left;
 font-size:1.5em;
 padding-top:2em;
 padding-bottom:100px;
 color:#339900;
}

#form1 {
 padding-top:6em;
 width:450px;
}

#form2 {
 width:450px;
}

#formleft {
 float:left;
}

#formright {
 float:right;
}

.label {
display:block;
margin-left:1em;
margin-bottom:-.3em;
font-size:.85em;
color:white;
font-family: Avenir;
text-shadow: px px px white;
}

.label2 {
 margin-top:13px;
 display:block;
 margin-left:0em;
 margin-bottom:0em;
 font-size:1em;
 color:white;
 font-family: Avenir;
 text-shadow: px px px white;
}

input {
 font-family: Courier New;
 font-size: 1em;
 height:1.4em;
 margin:2% 5% 5% 5%;
 width:90%;
 border-color:#555555;
 -webkit-appearance: none;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 5px;
 -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
 -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
 box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}

#input2 {
 font-family: Courier New;
 font-size: 1em;
 height:1.4em;
 margin:-4% 0% 0% 15%;
 width:75%;
 border-color:#555555;
 -webkit-appearance: none;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 5px;
 -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
 -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
...