JSFiddle - React, Tailwind, and code Playground

by Watermana

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<center><div class="burning-planet">
                <a target="blank" style="text-decoration: none" href="https://twitter.com">
                  <img class="twitter" alt="" src="https://www.danoneinstitute.org/wp-content/uploads/2020/06/logo-rond-twitter.png">
                </a>
                <a target="blank" style="text-decoration: none" href="https://medium.com">
                  <img class="mediumLogo" alt="" src="https://cdn1.iconfinder.com/data/icons/social-media-circle-7/512/Circled_Medium_svg5-512.png">
                </a>
              </div></center>
</body>
</html>

CSS

.burning-planet{
  width:700px;
  height:500px;
  background-image: url("https://i.stack.imgur.com/zgnFR.jpg");
  background-size: 100%;
}

.twitter {
  position:relative;
  width: 4.1rem;
  height: 4.1rem;
  top: 19.5%;
  left: -37.8%;
}

.mediumLogo {
  position:relative;
  width: 3.8rem;
  height: 3.8rem;
  top: 38.5%;
  left: -14.5%;
}