JSFiddle - React, Tailwind, and code Playground

by Jesper Brinch Korsbakke

HTML

<div>
   <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
   <style>
      * {
         font-family: Ubuntu, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }

      .container {
         margin-left: 10%;
         margin-right: 10%;
      }

      .container__current-membership {
         background-color: #f4f4f4;
      }

      .header-container {
         margin-left: 2%;
         margin-right: 2%;
         margin-bottom: 10px;
      }

      .subscription-image {
         display: block;
         margin-top: 50px;
         margin-left: auto;
         margin-right: auto;
         width: 60%;
      }

      .subscription-title {
         font-size: 4em;
         color: #EA148C;
         margin-bottom: 0;
      }

      .subscription-subtitle {
         font-size: 1.5em;
         color: #a0a0a0;
      }

      .feature {
         border-bottom: 2px solid #c7c7c7;
      }

      .feature-text {
         font-size: 1em;
         color: #a0a0a0;
         margin-bottom: 30px;
      }

      .feature-value {
         font-size: 1.5em;
         color: #EA148C;
      }
   </style>




   <div class="container">
      <div class="row container__current-membership">
        <div class="col-xs-12">
          <h4>Nuværende medlemskab</h4>
           <h3>Betal per tur</h3>
        </div>
        
        <div class="col-xs-6">1</div>
        <div class="col-xs-6">2</div>
        <div class="col-xs-6">3</div>
        <div class="col-xs-6">4</div>
      </div>
   </div>
</div>