JSFiddle - React, Tailwind, and code Playground

by ShunHua

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Self_Intro</title>
</head>
<body>

  <table cellpadding="5px" border="1px">
    <tr>
      <td colspan="2" id="title"><h1>Self Introduction<h1></td>
    </tr>
    <tr>
      <td class="left_col">Name</td>
      <td class="right_col">Shun-Hua</td>
    </tr>
    <tr>
      <td class="left_col">Birth</td>
      <td class="right_col">1997/04/04</td>
    </tr>
    <tr>
      <td class="left_col">Age</td>
      <td class="right_col">22 years old</td>
    </tr>
    <tr>
      <td class="left_col">School</td>
      <td class="right_col">Chung Yuan Christian University</td>
    </tr>
    <tr>
      <td class="left_col">Department</td>
      <td class="right_col">Electrical Engineering</td>
    </tr>
    <tr>
      <td class="left_col">Leisure activity</td>
      <td class="right_col">Workout, Play online game</td>
    </tr>
    <tr>
      <td class="left_col">Favorite food</td>
      <td class="right_col">Beef, Chicken, Egg, Vegetable</td>
    </tr>
  </table>
  </body>
</html>

CSS

body {
 //background-color:#d2e9ff;
  background-image:url("https://i.imgur.com/PphbkYD.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top;
  background-size: cover;
  //opacity:0.1;
}

table {
  margin:auto;
  border:3px groove;
  font-family:Impact;
  font-size:20px;
}

#title {
  //background-color:#99ff99;
  background-color:rgba(224,224,224,0.6);
  padding:1px;
}

img {
  width:250px;
  height:250px;
}

td {
  text-align:center;
  height:25px;
}

.left_col {
  background-color:rgba(224,224,224,0.6);
  //background-color:#e0e0e0;
  width:150px;
}

.right_col {
  background-color:rgba(224,224,224,0.6);
  width:300px;
}