JSFiddle - React, Tailwind, and code Playground

by Amresh Venugopal

HTML

<div class='route-container'>
  <div class='route'>
    /user/:id
    <div class='method-container'>
      <button class='method get'>GET</button>
      <button class='method put'>PUT</button>
      <button class='method delete'>DELETE</button>    
    </div>
  </div>
</div>

CSS

body {
  font-family: Helvetica;
}

.route-container {
  background: white;
  padding: 10px;
  width: auto;
}

.method-container {
  border-top: 1px solid #aaa;
  padding: 10px 0;
}

.method {
  background: #ccc;
  padding: 5px 10px;
  color: white;
  font-size: 12px;
  border-radius: 2px;
  letter-spacing: 1px;
}

.get {
  background: #3a0;
}

.put {
  background: #e9c100;
}

.delete {
  background: red;
}

button {
  border: none;
}