In this example below you will see how to do a Pills with some HTML / CSS and Javascript

This awesome code was written by mdelrossi1, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mdelrossi1 ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
      <link rel="stylesheet" href="css/style.css">



  <div class='pill'>test</div>
<div class='pill pill--large'>test</div>
<div class='pill pill--small'>test</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>




/*Downloaded from https://www.codeseek.co/mdelrossi1/pills-oBRYgQ */
.pill {
  margin-bottom: 10px;
  padding: 20px;
  background: tomato;
  border-radius: 10000px;
  line-height: 10px;

.pill--large {
  line-height: 40px;

.pill--small {
  padding: 5px;
  line-height: 20px;