JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<h3>Error</h3>
<div class="input-wrapper">
  <input class="cell error-b" value="Asdasd">
<div class="hint error">
Facility not found
</div>
</div>


<h3>Hint</h3>
<div class="input-wrapper">
  <input class="cell" value="Asdasd">
  <div class="hint">Facility not found</div>
</div>


<h3>grid</h3>
<table>
<tr>
  <td>patient name</td>
  <td>
    <div class="input-wrapper">
      <input class="cell error-b" value="Asdasd">
      <div class="hint error">Facility not found</div>
    </div>
  </td>
  <td>10/08/2019  111:24 PM</td>
  <td>status</td>
</tr>
<tr>
  <td>patient name</td>
  <td></td>
  <td>
    <div class="input-wrapper">
      <input class="cell" value="Asdasd">
      <div class="hint">Hint</div>
    </div>
  </td>
  <td>status</td>
</tr>
<tr>
  <td>patient name</td>
  <td></td>
  <td>10/08/2019  111:24 PM</td>
  <td>status</td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
</table>

CSS

body {
  padding: 20px;
  font-family: 'Open Sans', sans-serif;
  box-sizing: border-box;
  font-size: 14px;
  
}
.input-wrapper {
  position: relative;
}
.cell {
  height: 34px;
  width: 200px;
  border: 1px solid #266268;
  padding: 0 10px;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  outline: none;
  font-size: 14px;
  margin-top: -1px;
}
.cell.error-b{
  border: 1px solid #d20000;
}
.hint {
  height: 34px;
  min-width: 200px;
  background-color: #f8f8f8;
  display: inline-block;
  color: #999999;
  line-height: 34px;
  padding: 0 10px;
  box-sizing: border-box;
  box-shadow:  0 1px 3px rgba(0,0,0,.2);
  position: absolute;
  top: 33px;
  left: 0;
}

.hint.error {
  background-color: #FDF2F2;
  color: #d20000;
}

table {
  border-collapse: collapse;
}

table, th, td {
  border-top: 1px solid #ddd;
}
th, td {
  height: 32px;
  padding: 0;
}
table {
  width: 100%
}
h3 {
  margin-top: 50px;
}