JSFiddle - React, Tailwind, and code Playground

Primary vs secondary

by tonytlwu

HTML

<h1>Version 1</h1>

<button>Hi</button>
<button>Hi</button>
<button class="primary">Hi</button>
<button class="primary">Hi</button>
<button>Hi</button>
<button class="primary">Hi</button>
<button>Hi</button>
<button>Hi</button>
<button class="primary">Hi</button>
<button>Hi</button>
<button>Hi</button>
<button>Hi</button>
<button>Hi</button>


<h1>Version 2</h1>

<button>Hi</button>
<button>Hi</button>
<button class="primary">Hi</button>
<button class="primary">Hi</button>
<button>Hi</button>
<button class="primary">Hi</button>
<button>Hi</button>
<button>Hi</button>
<button class="secondary">Hi</button>
<button>Hi</button>
<button>Hi</button>
<button>Hi</button>
<button>Hi</button>

CSS

button {
  background: white;
  color: black;
  border: 1px solid black;
  padding: 3px 7px;
  border-radius: 3px;
}

.primary {
  background: blue;
  color: white;
}

.secondary {
  color: blue;
  border-width: 2px;
  border-radius: 30px;
}