JSFiddle - React, Tailwind, and code Playground

by Andre Milevskiy

HTML

<div class="plans">
    <div class="plan">
      <h3 class="plan-title">Started</h3>
      <p class="plan-price">$19 <span class="plan-unit">per month</span></p>
      <ul class="plan-features">
        <li class="plan-feature">2 <span class="plan-feature-name">websites</span></li>
        <li class="plan-feature">5<span class="plan-feature-unit">GB</span> <span class="plan-feature-name">storage</span></li>
        <li class="plan-feature">3 <span class="plan-feature-name">users</span></li>
      </ul>
      <a href="#" class="plan-button">Choose Plan</a>
    </div>
    <div class="plan plan-highlight">
      <p class="plan-recommended">Recommended</p>
      <h3 class="plan-title">Team</h3>
      <p class="plan-price">$49 <span class="plan-unit">per month</span></p>
      <ul class="plan-features">
        <li class="plan-feature">5 <span class="plan-feature-name">websites</span></li>
        <li class="plan-feature">20<span class="plan-feature-unit">GB</span> <span class="plan-feature-name">storage</span></li>
        <li class="plan-feature">10 <span class="plan-feature-name">users</span></li>
      </ul>
      <a href="#" class="plan-button">Choose Plan</a>
    </div>
    <div class="plan">
      <h3 class="plan-title">Premium</h3>
      <p class="plan-price">$99 <span class="plan-unit">per month</span></p>
      <ul class="plan-features">
        <li class="plan-feature">20 <span class="plan-feature-name">websites</span></li>
        <li class="plan-feature">50<span class="plan-feature-unit">GB</span> <span class="plan-feature-name">storage</span></li>
        <li class="plan-feature">25 <span class="plan-feature-name">users</span></li>
      </ul>
      <a href="#" class="plan-button">Choose Plan</a>
    </div>
    <div class="plan">
      <h3 class="plan-title">Corporate</h3>
      <p class="plan-price">$249 <span class="plan-unit">per month</span></p>
      <ul class="plan-features">
        <li class="plan-feature">&infin; <span...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

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

.about {
  margin: 70px auto 40px;
  padding: 8px;
  width: 260px;
  font: 10px/18px 'Lucida Grande', Arial, sans-serif;
  color: #bbb;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  background: #383838;
  background: rgba(34, 34, 34, 0.8);
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
}
.about a {
  color: #eee;
  text-decoration: none;
  border-radius: 2px;
  -webkit-transition: background 0.1s;
  -moz-transition: background 0.1s;
  -o-transition: background 0.1s;
  transition: background 0.1s;
}
.about a:hover {
 ...