JSFiddle - React, Tailwind, and code Playground

by Hemanth HM

HTML

<div id="message">
 <img src="https://fossathon.io/logo.svg" alt="">
  <h1>FOSSathon</h1>
    <h1></h1>
</div>

<div class="grid-container">
  <div class="prize">
    122
  </div>
  <div class="more-info">
    3345
  </div>
  <div class="slack">
    567
  </div>
</div>

CSS

* {
      box-sizing: border-box;
  }
  
  body {
      margin: 0;
      font-weight: 500;
      font-family: "Chelsea Market", Georgia, serif;
    background: black;
    color:wheat;
}

img {
  position:absolute;
  width:10%;
  top:0;
  left:0
}

#message {
  display:flex;
  justify-content:space-evenly
}

.prize {
  color:wheat;
}
  
body {
  
  background-image:url('https://fossathon.io/foss-bg.svg');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
  height: 100vh
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "prize prize more-info more-info"
    "prize prize more-info more-info"
    "slack slack more-info more-info";
}
.prize { grid-area: prize; }
.more-info { grid-area: more-info; }
.slack { grid-area: slack; }