JSFiddle - React, Tailwind, and code Playground

by pphheerroonn

HTML

<table class="minimalistBlack">
<thead>
<tr>
<th>Purpose/Activity</th>
<th>Type of data</th>
<th>Lawful basis for processing including basis of legitimate interest</th>
</tr>
</thead>
<tbody>
<tr>
<td>To register you as a new customer</td><td><p>
(a) 	Identity </br>
(b) 	Contact
</p></td><td>performance of a contract with you</td></tr>
<tr>
<td><p>
To process and deliver your orders:</br>
(a) 	communicating with you</br>
(b)	manage payments</br>
(c) Deliver goods </p>
</td><td><p>
(a) 	Identity </br>
(b) 	Contact </br>
(c) 	Financial </br>
(d) 	Transaction </br>
(e)	Marketing and Communications</br>
</p></td><td>performance of a contract with you 
</td></tr>
<tr>
<td><p>
To manage our relationship with you which will include:</br>
(a)	notifying you about changes to our terms or privacy policy</br>
(b) 	asking you to complete a survey</br>
</p></td><td><p>
(a) 	Identity </br>
(b) 	Contact </br>
(c) 	Profile </br>
(d)	Marketing and Communications
</p></td><td><p>
(a) performance of a contract with you </br>
(b) 	necessary to comply with a legal obligation</br>
(c) necessary for our legitimate interests (to keep our records updated and to study how customers use our products and services and develop our offerings)</br>
</p></td></tr>
<tr>
<td>To enable you to partake in a prize draw or competition </td><td><p>
(a) 	Identity </br>
(b) 	Contact </br>
(c) 	Profile </br>
(d) 	Usage </br>
(e)	Marketing and Communications
</p></td><td><p>
(a) performance of a contract with you</br> 
(b)	necessary for our legitimate interests (to offer additional features to our customers)
</p></td></tr>
<tr>
<td>To administer and protect our business and this website </br> (including troubleshooting, data analysis, testing, system maintenance, support, reporting and hosting of data) </td><td><p>
(a) 	Identity</br>
(b) 	Contact</br>
(c) 	Technical</br>
</p></td><td><p>
(a) necessary for our legitimate interests (for running our business, provision of administration and IT services, network...

CSS

table.minimalistBlack {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.minimalistBlack td, table.minimalistBlack th {
  border: 1px solid #FAFAFA;
  padding: 5px 4px;
}
table.minimalistBlack tbody td {
  font-size: 14px;
  vertical-align:top;
  min-width: 200px;
}

table.minimalistBlack tr:nth-child(even) {
  background: #fafafa;
}
table.minimalistBlack thead {
  background: #F2F2F2;
  background: -moz-linear-gradient(top, #f5f5f5 0%, #f3f3f3 66%, #F2F2F2 100%);
  background: -webkit-linear-gradient(top, #f5f5f5 0%, #f3f3f3 66%, #F2F2F2 100%);
  background: linear-gradient(to bottom, #f5f5f5 0%, #f3f3f3 66%, #F2F2F2 100%);
}
table.minimalistBlack thead th {
  font-size: 15px;
  font-weight: bold;
  color: #333333;
  text-align: left;
}
table.minimalistBlack tfoot td {
  font-size: 14px;
}