JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<ul class="vault-tiles">
  <li>
    <label>THe Form Name</label>
     <ul>
      <li data-name="confidential"></li>
      <li data-name="workflow"></li>
      <li data-name="archived"></li>
      <li data-name="submissions">11</li>
    </ul>
  </li>
   <li>
    <label>THe Form Name</label>
     <ul>
      <li data-name="confidential"></li>
      <li data-name="workflow"></li>
      <li data-name="archived"></li>
      <li data-name="submissions">11</li>
    </ul>
  </li>
   <li>
    <label>THe Form Name</label>
     <ul>
      <li data-name="confidential"></li>
      <li data-name="workflow"></li>
      <li data-name="archived"></li>
      <li data-name="submissions">11</li>
    </ul>
  </li>
   <li>
    <label>THe Form Name</label>
     <ul>
     <li data-name="confidential"></li>
      <li data-name="workflow"></li>
      <li data-name="archived"></li>
      <li data-name="submissions">11</li>
    </ul>
  </li>
</ul>

CSS

html{
  height: 100%;
}
body{
  margin: 0px;
  height: 100%;
}
ul.vault-tiles{
  list-style: none;
  font-family: helvetica;
  font-size: 13px;
}
ul.vault-tiles>li{
  margin: 2px;
  padding: 0px;
  position: relative;
  background-color: #eee;
  display: inline-block;
  width: calc(25% - 8px);
}
ul.vault-tiles>li>label{
  text-align: center;
  margin-top: 4px;
  height: 22px;
  display: block;
  font-size: 11px;
}
ul.vault-tiles>li>ul{
  list-style: none;
}
ul.vault-tiles>li>ul>li{
  margin: 2px;
  padding: 0px;
  width: 32px;
  background-color: #fff;
  border-radius: 50%;
  line-height: 32px;
  text-align: center;
  display: inline-block;
  height: 32px;
  vertical-align: bottom;
}

ul.vault-tiles>li>ul>li[data-name="submissions"]{
  background-color: blue;
  color: #fff;
}