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="prize">
  <ul>
    <li>Contribute back to commumity!</li>
    <li>Win Prizes</li>
    <li>Get some swags</li>
    <li>Have fun!</li>
    <li></li>
  </ul>
</div>

CSS

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

body > * {
  position: relative;
  /* Contain all margins without killing overflow but ensure it basically gets zeroed out. */
  padding: .01px 0;
  margin-left: 1.5em;
}

body > *:before {
  
  position: absolute;
  top: 0;
  left: -1em;
  width: 1em;
  height: 100%;
  font-size: 1.5em;
  text-align: center;
  background: white;
}

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
}