JSFiddle - React, Tailwind, and code Playground

by Jeroen Heijmans

HTML

<!doctype html>
<html lang="en">
  <head> </head>
  <body>
    <h1>What gift should you bring!?</h1>
    <div class="view">
      <div class="primary">
        <div id="🛑" class="box">
          <h2>🛑 Nothing!</h2>
          <p>
            Really, gift giving is not my love language. Let's beat consumerism
            together!
          </p>
        </div>
      </div>
      <p class="alternatives-explanation">
        And if you really insist on "getting me something", here's some alternatives...
      </p>
      <div class="alternatives">
        <div id="💚" class="box">
          <h2>💚 Donate</h2>
          <p>
            You know the non-profits I support. Pick one you like as well, and
            donate whatever you can miss in our name!
          </p>
        </div>
        <div id="🛠️" class="box">
          <h2>🛠️ Craft</h2>
          <p>Get me something you made, and can do without. Sky's the limit!</p>
        </div>
        <div id="📣" class="box">
          <h2>📣 Rise</h2>
          <p>
            Gift me some of your energy, and join me in my kind of activism!
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

body {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 30px;
  margin: 0;
  padding: 0;
  color: rgba(255, 240, 200, 0.95);
  background: linear-gradient(
    to bottom right,
    #000000,
    #050508,
    #0a0a10,
    #0f0f18,
    #141420,
    #191928,
    #1e1e30,
    #232338,
    #282840,
    #101020
  );
}

h1,
h2,
h3,
h4 {
  color: rgba(225, 200, 80, 0.95);
}

h1 {
  font-size: 1.6rem;
  text-align: center;
}

#🛑 h2 {
  font-size: 2.8rem;
}

.view {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.alternatives-explanation {
  opacity: 0.75;
}

.alternatives {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.box {
  border: 10px solid rgba(100, 200, 100, 0.25);
  background: rgba(100, 200, 100, 0.15);
  padding: 10px;
}

.box:nth-child(1n) {
}