JSFiddle - React, Tailwind, and code Playground

by PRAGADEESH S

HTML

<title>Employee Database</title>
<body>
<header>
<h3>
EMPLOYEE DATABASE
</h3>
</header>


<table>


  <tr>
    <th>Name</th>
    <th>Id</th> 
    <th>Dept</th>
    <th>Package</th>
  </tr>
  <tr>
    <td>Prag</td>
    <td>0112</td>
    <td>IT</td>
    <td>25000</td>
  </tr>
   <tr>
    <td>Dkay</td>
    <td>0113</td>
    <td>IT</td>
    <td>28000</td>
  </tr>
   <tr>
    <td>Hugh</td>
    <td>0156</td>
    <td>ITIS</td>
    <td>29000</td>
  </tr>
  </table>
  
 <form action="#" method="get">
 
 Enter Your Name<br>     
 <input type="text" name="Name"><br>
 Enter Your Id  <br>    
 <input type="text" name="Id"><br>
 Enter Your Dept  <br> 
 <input type="text" name="Dept"><br>
 Enter Your Package <br>
 <input type="text" name="Package"><br>
<br> <input type="button" value="Click To Add">
 
 
  </form>
  





</body>

CSS

h3{
  text-align:center;
}
table, th, td {
    border: 1px solid black;
     border-collapse: collapse;
     width:auto;
     margin:auto;
     padding: 15px;
    text-align: left;
}
input[type=text] {
    
   width: auto;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}