JSFiddle - React, Tailwind, and code Playground

by mikecmpbll

HTML

<div class="category-container">
  <div class="parentcategory category blue">Behaviour</div><br>
  <div class="subcategory category red">Disruptive activity</div>
</div>

<div class="category-container">
  <div class="normalcategory category green">Child Protection</div><br>
</div>

<div class="category-container">
  <div class="normalcategory category mauve">Home Issues</div><br>
</div>

CSS

* {
  font-family: arial, sans-serif;
}
.normalcategory {
  border-radius: 1em;
 }
 
.parentcategory { border-radius: 1em 1em 0em 0em; }

.category-container { display: inline-block; float: left; margin: 2px 5px }

.category {
  position: relative;
  width: 100%;
  font-weight: normal;
  padding: 4px 8px;
  font-size: 85%;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  line-height: 1;
  box-sizing: border-box;
}

.subcategory {
  border-radius: 0em 0em 1em 1em;
}

.blue { background-color: #AADEEA; }
.red { background-color: #FF7171; }
.green { background-color: #38CB9C; }
.mauve { background-color: #DDE4E9; }