JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div>
  <form action="/action_page.php">



<table id="products">
  <tr>
    <th class="rside">כמות</th>
    <th class="rside">דגם</th>
    <th class="rside">שם פריט</th>
  </tr>
  <tr>
    <td class="c">1</td>
    <td>    
      <select id="country" name="country">
        <option value="i5">INTEL CORE i5 9400F 2.9GHZ 9MB 6 CORES BOX</option>
        <option value="i7">INTEL CORE i7 9700 3.0 GHZ 12MB 8 CORES TRAY</option>
        <option value="i9">INTEL CORE i9 9900K 3.6 GHZ 16MB 8 CORES BOX</option>
     </select>
     </td>
    <td class="rside">מעבד</td>
  </tr>
  <tr>
    <td class="c">1</td>
    <td>MSI B360M PRO-VDH VGA / DVI / HDMI 4DIMM</td>
    <td class="rside">לוח אם</td>
  </tr>
  
  <tr>
    <td class="c">1</td>
    <td>
      <select id="mem" name="mem">
        <option value="8GB">DDR4 8GB 2400MHz Kingston</option>
        <option value="16GB">DDR4 16GB 2400MHz Kingston</option>
        <option value="20GB">DDR4 20GB 2400MHz Kingston</option>
     </select>
    </td>
    <td class="rside">זיכרון</td>
  </tr>
  
  <tr>
    <td class="c">1</td>
    <td>
      <select id="hd2" name="hd2">
        <option value="ssd250">SAMSUNG EVO860 2.5" SSD 250G MZ-76E250B</option>
        <option value="ssd500">SAMSUNG EVO860 2.5" SSD 500G MZ-76E500B</option>
      </select>   
    </td>
    <td class="rside">דיסק קשיח</td>
  </tr>
  <tr>
    <td class="c">1</td>
    <td>
      <select id="hd2" name="hd2">
        <option value="hd1TB">1TB 64MB SATA III 6GB/s EZEX 7200 Blue WD</option>
        <option value="ssd500">SAMSUNG EVO860 2.5" SSD 500G MZ-76E500B</option>
        <option value="ssd1TB">SAMSUNG EVO860 2.5" SSD 1TB MZ-76E1T0B</option>
      </select>    
    </td>
    <td class="rside">דיסק קשיח נוסף</td>
  </tr>
  <tr>
    <td class="c">1</td>
    <td>
      <select id="gcard" name="gcard">
        <option value="m1200">NVIDIA Quadro M1200</option>
        <option value="m2000">NVIDIA Quadro M2000</option>
        <option value="1050">NVIDIA GTX...

CSS

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}


input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

#products {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
 width:100%;
}


#products th.rside  {
  text-align: right;
}

#products td.rside  {
  text-align: right;
}

#products td.c  {
  text-align: center;
}

#products td, #products th {
  border: 1px solid #ddd;
  padding: 8px;
  background-color:#fff;
}

#products tr:nth-child(even){background-color: #f2f2f2;}

#products tr:hover {background-color: #ddd;}

#products th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-image: url("https://i.imgur.com/N1cnYFP.jpg");
  color: white;
}

.submit {background-image: url("https://i.imgur.com/N1cnYFP.jpg");
}