JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<main>
  
  <input class="tabular" id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Paypal</label>
    
  <input class="tabular" id="tab2" type="radio" name="tabs">
  <label for="tab2">American Express</label>
    
  <input class="tabular" id="tab3" type="radio" name="tabs">
  <label for="tab3">Visa</label>
    
  <input class="tabular"  id="tab4" type="radio" name="tabs">
  <label for="tab4">American Express</label>
    
  <section id="content1">
    <p>
      An electronic commerce (e-commerce) company that facilitates payments between parties through online funds transfers. PayPal allows customers to establish an account on its website, which is connected to a user's credit card or checking account. Once identification and proof of funds have been confirmed, a user may begin sending or receiving payments to and from other PayPal accounts. PayPal attempts to make online purchases safer by providing a form of payment that does not require the payor or payee to disclose credit card or bank account numbers.
    </p>
  </section>
    
  <section id="content2">
    <p>
      The American Express Company, also known as Amex, is an American multinational financial services corporation headquartered in Manhattan's Three World Financial Center in New York City, United States. Founded in 1850, it is one of the 30 components of the Dow Jones Industrial Average. The company is best known for its credit card, charge card, and traveler's cheque businesses. Amex cards account for approximately 24% of the total dollar volume of credit card transactions in the US.
    </p>
  </section>
    
  <section id="content3">
    <p>
     Visa Inc. (/ˈviːzə/ or /ˈviːsə/) is an American multinational financial services corporation headquartered in Foster City, California, United States. It facilitates electronic funds transfers throughout the world, most...

CSS

@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font: 14px/1 'Open Sans', sans-serif;
  color: #555;
  background: #eee;
}

h1 {
  padding: 50px 0;
  font-weight: 400;
  text-align: center;
}

p {
  margin: 0 0 20px;
  line-height: 1.5;
}

main {
  min-width: 320px;
  max-width: 800px;
  padding: 50px;
  margin: 0 auto;
  background: #fff;
}

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

input.tabular {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

label[for*='1']:before { content: '\f1f4'; }
label[for*='2']:before { content: '\f1f3'; }
label[for*='3']:before { content: '\f1f0'; }
label[for*='4']:before { content: '\f1f1'; }


label:hover {
  color: #888;
  cursor: pointer;
}

input.tabular:checked + label {
  color: #555;
  border: 1px solid #ddd;
  border-top: 2px solid red;
  border-bottom: 1px solid #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}

@media screen and (max-width: 650px) {
  label {
    font-size: 0;
  }
  label:before {
    margin: 0;
    font-size: 18px;
  }
}

@media screen and (max-width: 400px) {
  label {
    padding: 15px;
  }
}