A
Anonymous

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

<!DOCTYPE html> <html lang="en"> <head> {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'main.css' %}"> <title>Tables</title> </head> <body> <div class="table1"> <h1>Table 1: Table of Fruits and Their Prices</h1> <table> <tr> <th>Fruit</th> <th>Price</th> </tr> <tr> <td>Apple</td> <td>$0.25</td> </tr> <tr> <td>Orange</td> <td>$0.50</td> </tr> <tr> <td>Banana</td> <td>$1.00</td> </tr> <tr> <td>Pineapple</td> <td>$2.00</td> </tr> <tr> <td><strong>Total</strong></td> <td><strong>$3.75</strong></td> </tr> </table> </div> <div class="table2"> <h1>Table 2: A More Complex Sample Table</h1> <table> <tr> <th colspan="5">Camelid Comparison (Approximate as of 6/2011)</th> </tr> <tr> <td><img src="{% static 'desert.jpeg' %}" alt="Desert" width="200" height="150"></td> <th>

Prompt
Component Preview

About

TableComponent - A responsive table showcasing fruits and prices, with complex comparisons, professionally built with React and Tailwind. Get component free!

Share

Last updated 1 month ago