JSFiddle - React, Tailwind, and code Playground

by kinduff

HTML

<link rel="stylesheet" href="https://cdn.lineicons.com/3.0/lineicons.css">
<div class="wrapper">
  <div class="top">
  <p class="site-title">
    ~/kinduff.com
  </p>
  </div>
  
  <div class="main">
  <div>
    <h1>
    Simple health-check for Ruby on Rails
  </h1>
  <p class="description">
    Simple Rack middleware for healh-checks.
  </p>
  </div>

  </div>
  
  <div class="bottom">
    <p class="data">
      <i class="lni lni-book"></i> 183
      <i class="lni lni-timer"></i> 1 min
      <i class="lni lni-bubble"></i> 10
      <i class="lni lni-eye"></i> 16314
    </p>
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Cousine:wght@400;700&family=DM+Sans:wght@700&display=swap');

:root {
  --bg-color-1: #d0e6f4;
  --bg-color-2: #d6c5e8;
  --bg-color-3: #f2e098;
  --bg-color-4: #d4e6b5;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: 'Cousine', monospace;
  font-size: 18px;
  color: #0e0e0b;
}

.wrapper {
  width: 100%;
  aspect-ratio: 2 / 1;
  background-color: #f4ecdf;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.top, .bottom {
  flex-shrink: 0;
}

.main {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: start;
}

.main > div {
  width: 80%;
}

.site-title {
  color: #b72d2d;
  font-size: 2vw;
  font-weight: 700;
  text-align: left;
}

h1 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 6.5vw;
  line-height: 1.15;
  display: inline;
}

.description {
  margin-top: 25px;
  font-size: 2vw;
  font-weight: 400;
}

.data {
  font-size: 1.8vw;
  font-weight: 400;
}

.data i {
  vertical-align: middle;
}

JavaScript

const num = Math.floor( Math.random() * 4) + 1;
const element = document.querySelector('h1');
//element.style.setProperty("background-color", `var(--bg-color-${num})`);
element.style.setProperty("box-shadow", `
  inset 0 -10px 0 #f4ecdf,
	inset 0 -30px 0 var(--bg-color-${num})
`);