A
Anonymous

Product Specifications Table - Copy this React, Tailwind Component to your project

<div-className="container-mx-auto">-<table-className="w-full-border-collapse-border-border-gray-300">-<tbody>-{/*-Row-1---Merged-5-columns-*/}-<tr>-<td-colSpan={5}-className="border-border-gray-300-dark:bg-gray-dark-p-4-text-center-bg-gray-100">-ANALYTICAL-PRODUCTS-SPECIFICATIONS-GASOIL-EN590-10PPM-STANDARD-EXPORT-QUALITY-</td>-</tr>-{/*-Row-2---Mix-of-merged-and-individual-cells-*/}-<tr>-<td-rowSpan={2}-className="border-border-gray-300-p-4-text-center">-COMPONENT-</td>-<td-rowSpan={2}-className="border-border-gray-300-p-4-text-center">-METHOD-OF-ANALYSIS-</td>-<td-rowSpan={2}-className="border-border-gray-300-p-4-text-center">-UNIT-</td>-<td-colSpan={2}-className="border-border-gray-300-p-4-text-center">-RESULT-</td>-</tr>-<tr>-<td-className="border-border-gray-300-p-4-text-center">-Min.-</td>-<td-className="border-border-gray-300-p-4-text-center">-Max.-</td>-</tr>-{/*-Row-3---Mix-of-merged-and-individual-cells-*/}-<tr>-<td-className="border-border-gray-300-p-4-text-center">-Aspect-Color-</td>-<td-className="border-border-gray-300-p-4-text-center">-Visual-inspection-ASTM-</td>-<td-className="border-border-gray-300-p-4-text-center">-</td>-<td-className="border-border-gray-300-p-4-text-center">-Clear-</td>-<td-className="border-border-gray-300-p-4-text-center">-2.0-</td>-</tr>-{/*-Row-4---Individual-cells-*/}-<tr>-<td-className="border-border-gray-300-p-4-text-center">-</td>-<td-className="border-border-gray-300-p-4-text-center">-D1500-</td>-<td-className="border-border-gray-300-p-4-text-center">-</td>-<td-className="border-border-gray-300-p-4-text-center">-</td>-<td-className="border-border-gray-300-p-4-text-center">-</td>-</tr>-{/*-Row-5---Individual-cells-*/}-<tr>-<td-className="border-border-gray-300-p-4-text-center">-Density-@-15℃-</td>-<td-className="border-border-gray-300-p-4-text-center">-EN-ISO-3675:98/EN-ISO-12185:96/-CI:2001-</td>-<td-className="border-border-gray-300-p-4-text-center">-Kg/m<sup>3</sup>-</td>-<td-className="border-border-gray-300-p-4-text-center">-820.0-</td>-<td-className="border-border-gray-300-p-4-text-center">-845.0-</td>-</tr>-{/*-Row-6---Individual-cells-*/}-<tr>-<td-colSpan={5}-className="border-border-gray-300-p-4-text-center-dark:bg-gray-dark-bg-gray-100">-Distillation-</td>-</tr>-{/*-Row-5---Individual-cells-*/}-<tr>-<td-rowSpan={4}-className="border-border-gray-300-p-4-text-center">-<ul>-<li>Recovered-@-150℃</li>-<li>Recovered-@-250℃</li>-<li>Recovered-@-350℃</li>-<li>Recovered-@-95%</li>-</ul>-</td>-<td-className="border-border-gray-300-p-4-text-center">-</td>-<td-className="border-border-gray-300-p-4-text-center">-%-vol-</td>-<td-className="border-border-gray-300-p-4-text-center">-</td>-<td-className="border-border-gray-300-p-4-text-center">-2.0-</td>-</tr>-{/*-Row-6---Individual-cells-*/}-<tr>-<td-className="border-border-gray-300-p-4-text-center">-EN-ISO-3405:2000-</td>-<td-className="border-border-gray-300-p-4-text-center">-%-vol-</td>-<td-className="border-border-gray-300-p-4-text-center">-85.0<sub>(2)</sub>-</td>-<td-className="border-border-gray-300-p-4-text-center">-65.0<sub>(2)</sub>-</td>-</tr>-{/*-Row-7---Individual-cells-*/}-<tr>-<td-className="border-border-gray-300-p-4-text-center">-</td>-<td-className="border-border-gray-300-p-4-text-center">-%-vol-</td>-<td-className="border-border-gray-300-p-4-text-center">-</td>-<td-className="border-border-gray-300-p-4-text-center">-</td>-</tr>-{/*-Row-8---Individual-cells-*/}-<tr>-<td-className="border-border-gray-300-p-4-text-center">-</td>-<td-className="border-border-gray-300-p-4-text-center">-℃-</td>-<td-className="border-border-gray-300-p-4-text-center">-</td>-<td-className="border-border-gray-300-p-4-text-center">-360.0-</td>-</tr>-</tbody>-</table>-</div>

Prompt
Component Preview

About

ProductSpecificationsTable - Display detailed product specs like density, analysis methods, and results in a clean layout, built with. Get component free!

Share

Last updated 1 month ago