JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='box'>
  <section class='actions'>
    <div class='action'>
      click 1
    </div>
    <div class='action short'>
      click 2
    </div>
  </section>
  <h3>
    Title goes here
  </h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  </p>
</div>

SCSS

body {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.box {
  padding: 30px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.actions {
  text-align: right;
}

.action {
  margin: 0 5px;
  display: inline-block;
  vertical-align: middle;
  
  &:hover {
    cursor: pointer;
    color: teal;
  }
}