<div class="inline-block bg-blue blue-lightest px-2 fs-s2 br-round m-3">new</div> <div class="inline-block bg-red red-lightest px-2 fs-s2 br-round m-3">new</div> <div class="inline-block bg-green green-lightest px-2 fs-s2 br-round m-3">new</div> <div class="inline-block bg-yellow yellow-lightest px-2 fs-s2 br-round m-3">new</div>
<a href="#" class="inline-block bg-blue blue-lightest px-2 fs-s2 br-round m-3 no-underline hover-opacity-80">new</a> <a href="#" class="inline-block bg-red red-lightest px-2 fs-s2 br-round m-3 no-underline hover-opacity-80">new</a> <a href="#" class="inline-block bg-green green-lightest px-2 fs-s2 br-round m-3 no-underline hover-opacity-80">new</a> <a href="#" class="inline-block bg-yellow yellow-lightest px-2 fs-s2 br-round m-3 no-underline hover-opacity-80">new</a>
<button type="button" class="relative border px-5 py-3 br-2 fs-s2 blue-darker pointer"> messages <span class="absolute top-0 right-0 shift-tr border-white bw-3 block bg-blue blue-lightest px-2 fs-s3 br-round"> 10 </span> </button> <button type="button" class="relative border px-5 py-3 br-2 fs-s2 blue-darker pointer"> messages <span class="absolute top-0 right-0 shift-tr border-white bw-3 block bg-red red-lightest px-2 fs-s3 br-round"> 10 </span> </button> <button type="button" class="relative border px-5 py-3 br-2 fs-s2 blue-darker pointer"> messages <span class="absolute top-0 right-0 shift-tr border-white bw-3 block bg-green green-lightest px-2 fs-s3 br-round"> 10 </span> </button> <button type="button" class="relative border px-5 py-3 br-2 fs-s2 blue-darker pointer"> messages <span class="absolute top-0 right-0 shift-tr border-white bw-3 block bg-yellow yellow-lightest px-2 fs-s3 br-round"> 10 </span> </button>
<button type="button" class="relative bw-0 px-5 py-3 br-4 fs-s2 bg-blue blue-lightest pointer hover-opacity-80"> messages <span class="absolute top-0 right-0 shift-tr border-white bw-2 block bg-red p-1 br-round"> </span> </button>