JSFiddle - React, Tailwind, and code Playground
by Barry Carter
HTML
<div class="flex-grid">
<div class="col feature">
Feature
</div>
<div class="col available">
Lite
</div>
<div class="col available">
Standard
</div>
<div class="col available">
Enterprise
</div>
</div>
<div class="flex-grid">
<div class="col feature">
Max Concurrent Users
</div>
<div class="col available">
25
</div>
<div class="col available">
80
</div>
<div class="col available">
Unlimited
</div>
</div>
<div class="flex-grid">
<div class="col feature">
Coaching Licenses
</div>
<div class="col available">
1
</div>
<div class="col available">
10
</div>
<div class="col available">
Unlimited
</div>
</div>
<div class="flex-grid">
<div class="col feature">
Email Recordings
</div>
<div class="col available">
X
</div>
<div class="col available">
Y
</div>
<div class="col available">
Y
</div>
</div>
<div class="flex-grid">
<div class="col feature">
QA
</div>
<div class="col available">
X
</div>
<div class="col available">
Y
</div>
<div class="col available">
Y
</div>
</div>
<div class="flex-grid">
<div class="col feature">
Schedules and Timezones
</div>
<div class="col available">
X
</div>
<div class="col available">
Y
</div>
<div class="col available">
Y
</div>
</div>
<div class="flex-grid">
<div class="col feature">
Custom Dashboards
</div>
<div class="col available">
5
</div>
<div class="col available">
50
</div>
<div class="col available">
Unlimited
</div>
</div>
<div class="flex-grid">
<div class="col feature">
Data Alerts
</div>
<div class="col available">
Y
</div>
<div class="col available">
Y
</div>
<div class="col available">
Full Data Analytics Dashboard
</div>
</div>
<div class="flex-grid">
<div class="col feature">
Available Data Sets (lists)
</div>
<div class="col available">
25
...
CSS
.flex-grid {
display: flex;
}
.col {
flex: 1;
}