JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<script src="https://unpkg.com/@unocss/runtime/attributify.global.js"></script>
<html>

  <head>
    <meta charset="utf-8">
    <title>Pricing Table</title>
    <style type="text/css">
      body {
        font-family: -apple-system, Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 1.5;
        word-wrap: break-word;
        background: #F9F9F9;
      }

      a {
        color: #0366d6;
        text-decoration: none;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
      }

      td,
      th {
        border: 1px lightgray solid;
        padding: 6px 13px;
      }

      code:not([class]) {
        background-color: rgba(27, 31, 35, 0.05);
        border-radius: 3px;
        font-size: 90%;
        margin: 0;
        padding: 0.2em 0.4em;
      }

    </style>
  </head>

  <body un-cloak class="!opacity-100 text-gray-900 bg-gray-50 dark:text-gray-50 dark:bg-gray-950 @dark:bg-gray-900 @dark:text-gray-50" style="transition:all 0.333s 0.222s ease-in;opacity:0;">
    <style>
      td, th {
        border: none;
      }
      body {
        font-family: 'DM Sans', 'IBM Plex Sans', 'Gotham XNarrow', 'Gotham ExtraNarrow', 'Gotham Narrow', ui-sans-serif;
        font-size: 0.85rem
      }

      .category {
        text-align: center;
        font-weight: 500
      }

      table th {
        font-weight: 800;
        font-size: 1.1em
      }

      tbody {
        border-radius: 0 0 6px 6px
      }

      td:not(.category) {
        font-size: 0.9em
      }

    </style>
    <table>
      <thead class="bg-gray-200 dark:bg-gray-800 @dark:bg-gray-800 border border-gray-300 dark:border-gray-400/60 @dark:border-gray-400/60">
        <tr>
          <th><strong>Service</strong></th>
          <th><strong>Starter Package</strong></th>
          <th><strong>Professional Package</strong></th>
          <th><strong>Business Package</strong></th>
        </tr>
      </thead>
      <tbody class="border border-gray-300...