JSFiddle - React, Tailwind, and code Playground

by dpnminh

HTML

<div class="section">
  <span class="headline">Headline</span>
  <div class="subtitle">Subtitle</div>
  <a class="button">
  Click me
  </a>
</div>

<div class="section">
  <h1 class="headline">Headline</h1>
  <h3 class="subtitle">Subtitle</h3>
  <button class="button">
  Click me
  </button>
</div>
<aside class="sidebar">
  <h2 class="sidebar-title">
  Option 1
  </h2>
</aside>
<!-- 
<div class="sidebar">
  <span class="sidebar-title">
  Option 1
  </span>
</div> -->

SCSS

.headline {
  font-size: 32px;
  text-align: center;
  margin: 2rem auto;
  font-weight: 700;
  display: block;
}

html, * {
  font-family: Avenir;
}
.subtitle {
  font-size: 18px;
  text-align: center;
  margin: 1rem auto;
  font-weight: 500;
}

.sidebar {
  background: lightgray;
  position: absolute;
  top: 0;
  left: 0;
}

.sidebar-title {
  font-size: 26px;
  font-weight: 600;
}

.button {
  background: #0909cebf;
  color: white;
  padding: 1rem 2rem;
  font-size: 14px;
  cursor: pointer;
  border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
  border-style: solid;
  border-width: 1px;
  width: 120px;
  display: block;
  box-sizing: border-box;
  text-align: center;
  margin: auto;
  
  &:hover {
    background: #0909a59c;
  }
  
  &:active, &:focus {
    outline: none;
    background: #0909a5d9;
  }
}