JSFiddle - React, Tailwind, and code Playground

by Federico Tibaldo

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css">
<div class="font-sans leading-tight my-8 flex items-center justify-center antialiased">
  <div>
  <button class="current px-4 py-2 text-lg text-white font-bold rounded mr-2">
    Current Behavior
  </button>
  <button class="desired px-4 py-2 text-lg text-white font-bold rounded">
    Desired Behavior
  </button>
  </div>
</div>

<div class="font-sans leading-tight my-8 flex items-center justify-center antialiased">
  <div>
    <input type="text" placeholder="Current Behaviour" class="current px-4 py-2 text-lg text-white font-bold rounded mr-2"/>
    <input type="text" placeholder="Desired Behaviorr" class="desired px-4 py-2 text-lg text-white font-bold rounded"/>
  </div>
</div>

CSS

.desired {
  background-color: hsla(231, 51%, 60%, .75);
}

.desired:focus {
  border: 2px solid #6574CD;
}

.desired:hover {
  background-color: #7886d7;
}

.desired:active {
  background-color: #5661B5;
}

.current {
  background-color: hsla(231, 51%, 60%, .75);
}

.current:hover {
  background-color: #7886d7;
}

.current:active {
  background-color: #5661B5;
}

.current:focus {
  background-color: #6574CD;
}