JSFiddle - React, Tailwind, and code Playground

by Frontendor UI Library

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/12e3d97578.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700"></script>
<script src="https://use.fontawesome.com/12e3d97578.js"></script>
<div class="container-fluid">
 <div class="row">
  <div class="col-lg-4">
   <div class="pricing-table">
    <div class="pricing-table-header">
     <p class="pricing-table-title">Basic</p>
     <p class="pricing-table-cost text-primary">$5</p>
     <p class="pricing-table-about">Per Student/Year, billed annually.</p>
     <p class="pricing-table-about-alt">Minimum $7,500/Year.</p>
    </div>
    <div class="pricing-table-features">
     <ul>
      <li><i class="fa fa-check-circle"></i>Data Integration</li>
      <li><i class="fa fa-check-circle"></i>Longitudinal Data</li>
      <li><i class="fa fa-check-circle"></i>Alerts and KPIs</li>
      <li><i class="fa fa-check-circle"></i>Early Warnings System</li>
      <li><i class="fa fa-check-circle"></i>Email Alerts</li>
			<li><i class="fa fa-check-circle"></i>Email Insights</li>
      <li><i class="fa fa-check-circle"></i>Student Profiles</li>
      <li><i class="fa fa-check-circle"></i>Dashboards</li>
      <li><i class="fa fa-check-circle"></i>Reports</li>
      <li><i class="fa fa-check-circle"></i>Custom Assessments</li>
      <li><i class="fa fa-check-circle"></i>RTI/MTSS</li>
      <li><i class="fa fa-check-circle"></i>Collaboration/Sharing</li>
      <li><i class="fa fa-check-circle"></i>Family Access</li>
      <li><i class="fa fa-check-circle"></i>Web Hosting</li>
      <li><i class="fa fa-check-circle"></i>Training</li>
      <li><i class="fa...

CSS

body{
	background: #f7f7f7;
	padding:20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

.pricing-table
{
	background:#fff;
	border: 1px solid #ddd;
}

.pricing-table-header
{
	padding:20px;
	border-bottom:1px solid #ddd;
}

.pricing-table-title
{
	font-weight:400;
}

.pricing-table-features
{
	padding:20px 20px 20px 25px;
	font-size:.9rem;
	line-height:1.4rem;
}

.pricing-table-features ul
{
	list-style-type: none;
	margin:0;
	padding:0;
}
.pricing-table-features ul li i.fa
{
	margin-right:20px;
	color: #0275d8;
}

.pricing-table-features ul li.muted
{
	color: #ccc;
	font-weight: 400;
}
.pricing-table-features ul li.muted i.fa
{
	color: transparent;
}

.pricing-table-cta
{
	padding:20px;
	text-align:center;
}
.pricing-table-cost
{
	font-size:3rem;
}
.pricing-table-about
{
	margin-bottom:0;
}
.pricing-table-about-alt
{
	margin-bottom:0;
	color: #999;
}
.setup-costs
{
	margin-top:20px;
	text-align:center;
}