Bootstrap 4

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://tilt-vep-themes.s3.amazonaws.com/newskyxr-marketing.css">
<div class="container ">
  <div class="card  border-dark">
    <div class="card-header bg-primary text-center ">
      NEWSKY XR PRICING
    </div>
    <div class="card-body">
      <h2 class="card-title text-center">
        How many users do you expect at your event?</h5>
        <br/>
    <table class="table table-striped table-condensed">
      <thead>
        <tr>
          <th></th>
          <th class="text-center">
            <h4 class="text-center">
              BASIC</h4>
            <div class="muted">
              up to 1000 users</div>
            <h1>
              <sup><small>$</small></sup>5
              <sub><small>/mo</small></sub></h1>
          </th>
          <th class="text-center">
            <h4 class="text-center">
              ADVANCED</h4>
            <div class="muted">
              up to 1000 users</div>
            <h1>
              <sup><small>$</small></sup>10
              <sub><small>/mo</small></sub></h1>

          </th>

          <th class="text-center">
            <h4 class="text-center">
              PROFESSIONAL</h4>
            <div class="muted">
              up to 1000 users
            </div>
            <h1>
              <sup><small>$</small></sup>30
              <sub><small>/mo</small></sub></h1>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            3D Virtual Spaces
          </td>
          <td>
            1
          </td>
          <td>
           ...

CSS

body {
  margin: 10px;
}
.card {max-width:675px;}

table thead th {
  position: relative;
  color: slategray;
}

table tbody td:nth-child(3) {
  border-left: 6px double gold !important;
  border-right: 6px double gold !important;
}


table thead th:nth-child(3) {
  border-left: 6px double gold !important;
  border-right: 6px double gold !important;
  border-top: 2px solid gold !important;
}

table tbody td:nth-child(4) {
  border-right: 2px solid gold !important;
}

table thead th:nth-child(4) {

  border-right: 2px solid gold !important;
  border-top: 2px solid gold !important;
}

table thead th:nth-child(3) {
  border-left: 6px double gold !important;
  border-right: 6px double gold !important;
  border-top: 2px solid gold !important;
}

table thead th:nth-child(2) {

  border-left: 2px solid gold !important;
  border-top: 2px solid gold !important;
}


table tbody td:nth-child(2) {
  border-left: 2px solid gold !important;

}

table tbody tr:last-child td:nth-child(2),
table tbody tr:last-child td:nth-child(3),
table tbody tr:last-child td:nth-child(4) {
  border-bottom: 2px solid gold !important;

}

table td:nth-child(2),
table td:nth-child(3),
table td:nth-child(4) {
  text-align: center;
  width: 24%;
}

.card-body {
  padding: 20px;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: aliceblue;
}

table thead th h4 {
  font-size: 16px;
}
table thead th h1 {
  font-size: 34px;
}
h4.text-center::after {
    content: "";
    display: inline-block;
    width: 80%;
    background-color: #fff;
    position: absolute;
    top: -2px;
    height: 2px;
    right: 10%;
}
h4.text-center {
    display: inline-block;
    width: 80%;
    background-color: #fff;
    position: absolute;
    top: -10px;
    right: 10%;
}
table thead th .muted {
  padding-top:2px;
  font-size:12px;
}
table thead th sub {
  margin-left:-15px;
 
}
table thead th small{ color: slategray;}