JSFiddle - React, Tailwind, and code Playground

by pukster

HTML

<body>
   <div class='A'>
      <form id='fooForm' method='post' action='foo.php'>
      <div class='B1'>
         Please help us so we can better help you
      </div>
      <div class='B2'>
         <div class='B2-1'>
            Required Information:<br>
            Name: <input type="text" name="fullName"><br>
            Age:
            <select name='age'>
            </select>
            *
            height:
            <select name='height'>
            </select>
            *
            weight:
            <select name='weight'>
            </select>
            <a href="#">Learn More</a>
            <br>
         </div>
         <div class='B2-2'>
            Optional Information:<br>
            Favourite Power Ranger: <input type="text" name="favPowerRanger"><br>
            Paegan Religion:
            <select name='religion'>
            </select>
            Dream Job: <input type="text" name="dreamJob"><br>
         </div>
      </div>
      <input type='submit' name='submit' value='You are Winnar'/>
      </form>
   </div>
</body>

CSS

.A {
            width: 50%;
            min-width: 50%;
            height: 50%;
            min-height: 50%;
            position: relative;
            left: 25%;
            top: 15%;
            padding: 10px;
            background-color:#E0EBEB;
            text-align:left;
         }

         .B1 {
            width: 100%;
            min-width: 100%;
            height: 10%;
            min-height: 10%;
            position: relative;
            background-color:#A0EBEB;
         }

         .B2 {
            width: 100%;
            min-width: 100%;
            height: 90%;
            min-height: 90%;
            position: relative;
         }

         .B2-1 {
            width: 90%;
            min-width: 90%;
            height: 45%;
            min-height: 45%;
            position: relative;
            background-color:#FFFFFF;
            font-size:20px;
         }

         .B2-2 {
            width: 100%;
            min-width: 100%;
            height: 45%;
            min-height: 45%;
            position: relative;
            background-color:#FFFFFF;
            font-size:20px;
         }

         .B2 ul { 
            float:left;
            margin: 0px; 
            padding: 0px; 
            list-style-type: none; 
            text-align: center; 
         } 

         .B2 ul li {  
            display: inline; 
         } 

         .B2 ul li a { 
            text-decoration: none; 
            padding: .4em 1em; 
            color: #fff; 
            background-color: #000; 
            float: left;
         } 

         .B2 ul li a:hover { 
            color: #000; 
            background-color: #FF3300; 
         }