JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<p>Lyles Group Welfare Benefit Plan (Plan) maintains a “Self-Insured” Plan. That means that the Company is ultimately responsible for the health care costs, and pays for all of those costs plus administration fees. This differs from a fully-insured Plan where the insurance company is ultimately responsible for the health care costs and the employer pays the premiums. Being self-insured allows the Company to design our own health benefits.</p>
<p>
We have chosen HealthComp to be the Administrator for the Plan. We rent a PPO network for medical and dental from Blue Cross. When obtaining medical or dental care services we recommend choosing an in-network provider, as opposed to an out-of-network provider. An in-network provider is one contracted by Blue Cross to provide services to Plan members for specific pre-negotiated rates. If Plan Participants utilize a medical provider (physician, dentist, lab or hospital) that is included in the Preferred Provider Network, the participant will benefit from paying negotiated discounted rates and will receive a larger reimbursement percentage from the Plan. When you chose an in-network provider it saves you and the Plan (Company) valuable money. The Plan receives PPO negotiated discounts on health charges and will pay claims at 90%. You pay 10% (assuming you have met your deductible). Lower cost to you, means lower cost for the company. Our goal is to partner with you to keep healthcare costs down so we can maintain the excellent benefits we offer.</p>
<p>An out-of-network provider is one not contracted with Blue Cross. Typically, if you visit a physician or other provider within the network, the amount you will be responsible for paying will be less than if you go to an out-of-network provider. When you chose an out-of-network provider, the Plan will pay health claims at 75%. Since there are no PPO negotiated discounts, the Plan (Company) pays claims at the “Usual, Customary and Reasonable fees” (UCR) rates that are...

CSS

@import url('https://fonts.googleapis.com/css?family=Muli');
  body {
  font-family: Muli, sans-serif;
  font-size: 15px;
  width: 100%;
}

*, *:before, *:after {
  -webkit-border-sizing: border-box;
  -moz-border-sizing: border-box;
  border-sizing: border-box;
}

.container {
  width: 180px;
}

.container > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
    
}

.dropdown {
  position: relative;

}
.dropdown a {
  text-decoration: none;
  border-radius: 10px;
}
.dropdown [data-toggle="dropdown"] {
  display: block;
  color: white;
  background: #4ba0e5;
  padding: 10px;
  margin: 0 0 10px 0;
}
.dropdown [data-toggle="dropdown"]:hover {
  background: #4ba0e5;
}
.dropdown [data-toggle="dropdown"]:before {
  position: absolute;
  display: block;
  color: #fff;
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}

  .dropdown > .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
   -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -moz-transition: max-height 0.6s ease-out;
  -o-transition: max-height 0.6s ease-out;
  -webkit-transition: max-height 0.6s ease-out;
  transition: max-height 0.6s ease-out;
  animation: hideAnimation 0.4s ease-out;
  -moz-animation: hideAnimation 0.4s ease-out;
  -webkit-animation: hideAnimation 0.4s ease-out;
}
.dropdown > .dropdown-menu li {
  padding: 0;
}
.dropdown > .dropdown-menu li a {
  display: block;
  color: white;
  line-height: 16px;
  letter-spacing: -.5px;
  background: #656a6d;
  padding: 10px;
  margin: 0 0 10px 0;
}
.dropdown > .dropdown-menu li...