JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<div class="container" style="float: left; margin: 0 0 0 10px;">
<ul>
<li class="dropdown">
<input type="checkbox" />
<a href="#" data-toggle="dropdown" style="text-align: center;">Plan<br>Documents</a>
<ul class="dropdown-menu">
<li><a href="https://lylesgroup.dynafile.com/df/pl.axd/c20e1efb-f155-437d-b212-b24737e62fdd">Summary of Company Benefits</a></li>
<li><a href="https://lylesgroup.dynafile.com/df/pl.axd/819a17ba-ba90-4547-9885-0a72d73cf7e1">Summary of Benefits and Coverage</a></li>                         
<li><a href="https://lylesgroup.dynafile.com/df/pl.axd/787cd5bc-3e78-4f0f-9bcb-d59edd55b644">Plan Document and Summary Plan Description</a></li>
<li><a href="https://lylesgroup.dynafile.com/df/pl.axd/6740baea-9311-4d91-9e8b-ded28dbafcc9">Wraparound Summary Plan Description</a></li> 
</ul>
</ul>
</div>

<div class="container" style="float: left; margin: 0 0 0 10px;">
<ul>
<li class="dropdown">
<input type="checkbox" />
<a href="#" data-toggle="dropdown" style="text-align: center; line-height: 39px;">HealtComp</a>
<ul class="dropdown-menu">
<li><a href="https://www.healthcomp.com/members.html">HealthComp Website</a></li>
<li><a href="https://lylesgroup.dynafile.com/df/pl.axd/db613d1e-effe-41d5-a2fd-062c81f881bf">HCOnline Registration Instructions</a></li>
<li><a href="https://lylesgroup.dynafile.com/df/pl.axd/476e6f4b-7155-484f-91da-a3ecd52c2bd3">HCOnline Mobile App Instructions</a></li>
<li><a href="https://lylesgroup.dynafile.com/df/pl.axd/9d83ffbe-5ee7-41e0-a936-2631b18e329e">Register for Electronic Explanation of Benefits</a></li>
<li><a href="https://lylesgroup.dynafile.com/df/pl.axd/d1feeefa-14d5-46ec-a0e4-46bb6f60bb99">Sample of a Explanation of Benefits</a></li>  
</ul>
</li>
</ul>
</div>

<div class="container" style="float: left; margin: 0 0 0 10px;">
<ul>
<li class="dropdown">
<input type="checkbox" />
<a href="#" data-toggle="dropdown" style="text-align: center">Anthem<br>BlueCross</a>
<ul class="dropdown-menu">
<li><a...

CSS

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

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

.container {
  width: 230px;
}

.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: 17px;
  letter-spacing: -.5px;
  background: #656a6d;
  padding: 10px 10px;
  margin: 0 0 10px 0;
}
.dropdown > .dropdown-menu li a:hover {
 ...