JSFiddle - React, Tailwind, and code Playground
by rami7250
HTML
<html>
<head>
<style>
body {padding:30px;}
#customers {
direction:rtl;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td.left{
text-align:left;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: right;
background-color: #04AA6D;
color: white;
}
h1 {text-align:right;font-family:arial;}
</style>
</head>
<body>
<center><p><img src="https://www.jotform.com/uploads/rami736/form_files/cctlogo.621f29a9e48773.58604043.jpg" height="70px" alt="" /></p></center>
<h1>פרטי תקלה</h1>
<table id="customers">
<tr>
<th>פרטים</th>
<th>נתון</th>
</tr>
<tr>
<td>שם פרטי ומשפחה באנגלית</td>
<td class="left">{input4}</td>
</tr>
<tr>
<td>אימייל</td>
<td class="left">{input17}</td>
</tr>
<tr>
<td>טלפון</td>
<td class="left">{input12}</td>
</tr>
<tr>
<td>שם תצוגה</td>
<td class="left">{input6}</td>
</tr>
<tr>
<td>חבר בקבוצות</td>
<td class="left">{input19}</td>
</tr>
<tr>
<td>גישה לכוננים</td>
<td class="left">{input18}</td>
</tr>
<tr>
<td>גישה והרשאה לתיקיות</td>
<td class="left">{input16}</td>
</tr>
<tr>
<td>עבודה מהבית באמצעות VP</td>
<td>{input14}</td>
</tr>
</table>
</body>
</html>
CSS
body {padding:30px;}
#customers {
direction:rtl;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td.left{
text-align:left;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: right;
background-color: #04AA6D;
color: white;
}
h1 {text-align:right;font-family:arial;}