JSFiddle - React, Tailwind, and code Playground
by Kirubel Girma
HTML
<table class="table"><tbody><tr><td>Scope Name</td><td>Sample</td></tr><tr><td>Location</td><td>6000, Victory Way</td></tr><tr><td>Facility Certifications</td><td>Fulfillment, Frozen-Refrigerated</td></tr><tr><td>Use Case</td><td>Overflow</td></tr><tr><td>Projected Start Date</td><td>-</td></tr><tr><td>Project Term</td><td>-</td></tr><tr><td>Commodity</td><td>-</td></tr><tr><td>Average Inbound Qty</td><td>-</td></tr><tr><td>Average Inbound Volume</td><td>-</td></tr><tr><td>Average Outbound Qty</td><td>-</td></tr><tr><td>Average Outbound Volume</td><td>-</td></tr><tr><td>Total SKU</td><td>9999</td></tr><tr><td>Inbound Mode</td><td>-</td></tr><tr><td>Outbound Mode</td><td>-</td></tr><tr><td>Transportation Assistance</td><td>-</td></tr></tbody></table>
CSS
.main_table table {
width: 100%;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
background-color: transparent;
}
table {
border-collapse: collapse;
}
*, ::after, ::before {
box-sizing: border-box;
}
user agent stylesheet
table {
display: table;
border-collapse: separate;
box-sizing: border-box;
text-indent: initial;
border-spacing: 2px;
border-color: grey;
}
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
outline: 0;
}
.modal-dialog {
position: relative;
width: 100%;
height: 100%;
padding: 1em;
pointer-events: none;
}
body {
margin: 0;
padding: 0;
font-family: "Poppins",sans-serif;
font-weight: 400;
overflow-x: hidden;
}
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 1rem;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}