JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<table>
    <caption>Workshops features and pricing table</caption>

    <tr>
        <td></td>
        <th>
            <span class="fsz-l d-b">Option 01</span>
            <span class="fsz-l fw-b d-b">Workshop</span>
        </th>
        <th>
            <span class="fsz-l d-b">Option 02</span>
            <span class="fsz-l fw-b d-b">Workshop & Coaching</span>
        </th>
    </tr>



    <tr>
        <td>
            <span class="fsz-m fw-b d-b">Week 1-2</span>
            <span class="fsz-m d-b">
              <span class="fst-i">Values Creator</span> and <span class="fst-i">Brand Me</span> activity.
            </span>
            <span class="d-b">
              <span class="fst-i">4 hours over 2 weeks on your own schedule.</span>
            </span>
        </td>
        <td class="tac">
            <span class="checkmark"></span>
        </td>
        <td class="tac">
          <span class="checkmark"></span>
        </td>
    </tr>
    <tr>
        <td>
            <span class="fsz-m fw-b d-b">Week 2</span>
            <span class="fsz-m d-b">
              <span class="fst-i">Font Your Next</span> workshop
            </span>
            <span class="d-b">
              <span class="fsz-s">One full Saturday.</span>
            </span>
        </td>
        <td class="tac">
          <span class="checkmark"></span>
        </td>
        <td class="tac">
          <span class="checkmark"></span>
        </td>
    </tr>
    <tr>
        <td>
            <span class="fsz-m fw-b d-b">Week 3-10</span>
            <span class="fsz-m d-b">
              <span class="fst-i">Font Your Next</span> coaching program
            </span>
        </td>
        <td class="tac">

        </td>
        <td class="tac">
          <span class="checkmark"></span>
        </td>
    </tr>
    <tr>
        <td>
            <span class="fsz-m fw-b d-b">2 x one on one coaching sessions with Kate</span>
            <span class="d-b">
              <span class="fst-i">Scheduled...

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i|Muli:400,400i,600,600i,700,700i,800,800i,900|Questrial|Raleway:400,400i,500,500i,600,600i,700,700i');

body {
background-color: #f7f3f0;
color: #333;
font-family: 'Muli', sans-serif;
xfont-family: 'Questrial', sans-serif;
xfont-family: 'Montserrat', sans-serif;
font-family: 'Raleway', sans-serif;
font-size: 14px;
}


table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;

}

th,
td {
  border: 1px solid #c0bcee;
  padding: 2em;
  text-align: left;
  font-weight: inherit;
}

th:first-child,
td:first-child {
    width: 350px;
}

caption {
  display: none;
}




.tac {
  text-align: center;
}



.fsz-l {
  font-size: 1.2em;
}

.fsz-m {
   font-size: 1.1em;
}

.fw-b {
  font-weight: bold;
}

.fst-i {
  font-style: italic;
}

.d-b {
  display: block;
}


.checkmark:after {
  content: "\2713";
   color: #ff69ce;
   font-size: 2em;;
}